表单选项互斥问题（vue）

38次阅读

共计 2643 个字符，预计需要花费 7 分钟才能阅读完成。

最近有一个需求：表单中有 3 个多选框，而他们的选项是一样的，但是如果其中一个选项被选择之后，在另外 2 个多选框里面就不能再选了。这样的问题，让我想到了“将乒乓球放入不同盒子”的例子。
上代码
// index.html

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<meta http-equiv=”X-UA-Compatible” content=”ie=edge” />
<title>Document</title>

// 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;
}

每个 ball 对象都有一个 category 属性，用来表示它属于哪个盒子。然后在渲染的时候，根据 category 来计算使用的类名。

正文完