資訊專(zhuān)欄INFORMATION COLUMN
摘要：最近有一個(gè)需求表單中有個(gè)多選框，而他們的選項(xiàng)是一樣的，但是如果其中一個(gè)選項(xiàng)被選擇之后，在另外個(gè)多選框里面就不能再選了。上代碼乒乓球放入不同的盒子選項(xiàng)互斥每個(gè)對(duì)象都有一個(gè)屬性，用來(lái)表示它屬于哪個(gè)盒子。
最近有一個(gè)需求：
表單中有3個(gè)多選框，而他們的選項(xiàng)是一樣的，但是如果其中一個(gè)選項(xiàng)被選擇之后，在另外2個(gè)多選框里面就不能再選了。
這樣的問(wèn)題，讓我想到了“將乒乓球放入不同盒子”的例子。
上代碼
// index.html
Document
乒乓球放入不同的盒子（選項(xiàng)互斥）
// main.js
const balls = Array(12)
.fill(undefined)
.map((v, i) => ({ id: i < 9 ? `0${i + 1}` : i + 1, category: null }))
const vm = new window.Vue({
el: "#app",
data: () => ({
msg: "hahahhaha",
balls,
categories: ["red", "green", "blue"],
currCategory: "red"
}),
computed: {
ballList() {
return this.balls.map(v => {
let className = ["ping-pong-ball"]
if (v.category) {
className.push(v.category)
if (v.category !== this.currCategory) {
className.push("disable")
}
}
return { ...v, className }
})
}
},
methods: {
onBoxClick(category) {
if (category !== this.currCategory) {
this.currCategory = category
}
},
onBallClick(id) {
const ball = this.balls.find(v => v.id === id)
if (ball) {
ball.category = ball.category ? null : this.currCategory
}
}
}
})
// styles.css
#app {
user-select: none;
}
.ping-pong-list {
display: flex;
margin: 20px;
justify-content: center;
flex-wrap: wrap;
}
.ping-pong-ball {
width: 50px;
height: 50px;
margin: 5px;
border-radius: 50%;
box-shadow: 0 0 10px 0 #aaa;
text-align: center;
line-height: 50px;
}
.ping-pong-list .ping-pong-ball {
cursor: pointer;
}
.box-wrapper {
display: flex;
justify-content: space-around;
margin-top: 30px;
}
.box {
display: flex;
align-content: flex-start;
flex-wrap: wrap-reverse;
width: 300px;
height: 200px;
border: 10px solid;
border-top-width: 0;
cursor: pointer;
transition: all 0.25s;
}
.box.red {
border-color: rgb(238, 97, 97);
}
.box.green {
border-color: rgb(97, 238, 156);
}
.box.blue {
border-color: rgb(97, 146, 238);
}
.box.active {
box-shadow: 0 10px 20px 0 #aaa;
}
.ping-pong-ball.red,
.box.red .ping-pong-ball {
background-color: rgb(238, 97, 97);
}
.ping-pong-ball.green,
.box.green .ping-pong-ball {
background-color: rgb(97, 238, 156);
}
.ping-pong-ball.blue,
.box.blue .ping-pong-ball {
background-color: rgb(97, 146, 238);
}
.ping-pong-ball.disable {
opacity: 0.25;
pointer-events: none;
}
每個(gè)ball對(duì)象都有一個(gè)category屬性，用來(lái)表示它屬于哪個(gè)盒子。然后在渲染的時(shí)候，根據(jù)category來(lái)計(jì)算使用的類(lèi)名。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/101994.html
摘要：學(xué)習(xí)筆記表單與表單與提供了指令，用于在表單類(lèi)元素上雙向綁定數(shù)據(jù)。事實(shí)上，也是一個(gè)特殊的語(yǔ)法糖，只不過(guò)它會(huì)在不同的表單上智能處理。選擇的項(xiàng)復(fù)選框復(fù)選框單獨(dú)使用時(shí)，也是用綁定一個(gè)布爾值。復(fù)選框選擇列表當(dāng)選中時(shí)，是一個(gè)，所以。 學(xué)習(xí)筆記：表單與v-model 表單與v-model Vue.js提供了v-model指令，用于在表單類(lèi)元素上雙向綁定數(shù)據(jù)。 使用v-model后，表單控件顯示的值...
摘要：需要實(shí)現(xiàn)如上圖的功能首次加載頁(yè)面，根據(jù)里的高亮對(duì)應(yīng)的選項(xiàng)點(diǎn)擊某個(gè)選項(xiàng)，該選項(xiàng)高亮，其他去掉高亮代碼結(jié)構(gòu)自我理解參考鏈接 showImg(https://segmentfault.com/img/bV8k6F?w=929&h=182); 需要實(shí)現(xiàn)如上圖的功能 1. 首次加載頁(yè)面，根據(jù)data里的catgoryId高亮對(duì)應(yīng)的選項(xiàng) 2. 點(diǎn)擊某個(gè)選項(xiàng)，該選項(xiàng)高亮，其他去掉高亮 代碼結(jié)構(gòu)： ...
摘要：相當(dāng)于可以編輯問(wèn)卷并提供問(wèn)卷展示，數(shù)據(jù)統(tǒng)計(jì)的這么一個(gè)平臺(tái)。極大的節(jié)省了需要進(jìn)行表單樣式修改的時(shí)間，同時(shí)，讓動(dòng)態(tài)渲染表單成為一件可能且容易的事情。表單動(dòng)態(tài)渲染剛好在項(xiàng)目之前，有過(guò)一次動(dòng)態(tài)配置表單的嘗試通過(guò)字段自動(dòng)生成表單及驗(yàn)證。 近幾天來(lái)了個(gè)緊急項(xiàng)目，想要做一個(gè)內(nèi)部版本的問(wèn)卷星。相當(dāng)于可以編輯問(wèn)卷并提供問(wèn)卷展示，數(shù)據(jù)統(tǒng)計(jì)的這么一個(gè)平臺(tái)。整個(gè)項(xiàng)目耗時(shí)不長(zhǎng)，本著積淀和積累的原則，將過(guò)程中的...
閱讀 3218·2023-04-25 18:22
閱讀 2510·2021-11-17 09:33
閱讀 3620·2021-10-11 10:59
閱讀 3306·2021-09-22 15:50
閱讀 2939·2021-09-10 10:50
閱讀 921·2019-08-30 15:53
閱讀 508·2019-08-29 11:21
閱讀 3043·2019-08-26 13:58
