使⽤uni-app的checkbox-group⾃定义不超过5个的多选
前端⼩⽩的uni-app艰难学习之路
问题
在开发过程中，我遇到了这样⼀个功能，⽤户只能选择不超过5个的选项，看似简单的功能，但却花了我⼤量的逻辑关系才勉强做出来，功能是实现了，但是代码看着⽐较繁琐，不过我实在不到更好的办法了，如果有路过的⼤神有更好的办法希望可以不吝赐教
解决
1、先写布局
<checkbox-group class="content-class" @change="chooseMaleLike">
<label class="item" v-for="(item, index) in maleLike" :key="index" :class="{on: item.isChecked}">
<checkbox :value="item.value"></checkbox>
<text class="item-text">{{}}</text>
</label>
</checkbox-group>
2、在data⾥定义我们需要的变量
data () {
return {
maleLike: [],
currentArr: [], // 当前⽤户想要的选项，最⼤为5
oldArr: [], // 上⼀次的返回值
hasPass: false // ⽤户之前是否选择过，是为true
}
}
3、method⾥写chooseMaleLike⽅法
methods: {
chooseMaleLike: function (e) {
if (e.detail.value.length > 5) { // 如果选择的个数超过5个
if (!this.hasPass) { // 当⽤户选择数量是第⼀次超过5
this.hasPass = true
五大编程appif (e.detail.value.length > this.oldArr.length) { // 如果当前选择总数⼤于上⼀次选择总数（⽤户没有取消过选择）
this.currentArr = e.detail.value.slice(0, 5)
uni.showToast({
title: '最多5个',
icon: 'none'
})
} else { // 如果当前选择总数⼩于上⼀次选择总数（⽤户取消部分选择）
let arr = []
for (var i = 0; i < this.currentArr.length; i++) {
for (var j = 0; j < 5; j++) {
if (this.currentArr[i] === e.detail.value[j]) {
arr.push(this.currentArr[i])
} else {
continue
}
}
}
this.currentArr = arr
}
} else { // 当⽤户选择数量不是第⼀次超过5（这时候change事件的返回值⾥有不⼀定是⽤户想要的值，所以需要做判断）
if (e.detail.value.length > this.oldArr.length) { // ⽤户⼜增加了选项
let n = e.detail.value.length
if (this.currentArr.length < 5) {
this.currentArr.push(e.detail.value[n - 1])
} else {
uni.showToast({
title: '最多5个',
icon: 'none'
})
}
} else { // ⽤户取消了部分选项
let arr = []
for (var i = 0; i < this.currentArr.length; i++) {
let n = e.detail.value.indexOf(this.currentArr[i])
if (n !== -1) {
arr.push(this.currentArr[i])
} else {
continue
}
}
this.currentArr = arr
}
}
} else { // 如果选择的个数⼩于等于5
if (this.hasPass) { // 不是第⼀次⼩于5，即之前多选过，后来⼜取消选择
if (e.detail.value.length < this.oldArr.length) { // ⽤户取消了部分选择
let arr = []
for (var i = 0; i < this.currentArr.length; i++) {
let n = e.detail.value.indexOf(this.currentArr[i])
if (n !== -1) {
arr.push(this.currentArr[i])
} else {
continue
}
}
this.currentArr = arr
} else { // ⽤户增加选择，增加的新选项在数组最后
let n = e.detail.value.length
this.currentArr.push(e.detail.value[n - 1])
}
} else { // 是第⼀次⼩于5，这个最简单了，直接选了什么就给什么
this.currentArr = e.detail.value
}
if (e.detail.value.length === 0) { // 如果⽤户取消了全部选择，让hasPass为false，即下⼀次再选时就会判断为第⼀次选择            this.hasPass = false
}
}
for (var i = 0, lenI = this.maleLike.length; i < lenI; ++i) { // 给⽤户的选项添加样式
this.maleLike[i].isChecked = false;
for (var j = 0, lenJ = this.currentArr.length; j < lenJ; ++j) {
if (String(this.maleLike[i].value) === String(this.currentArr[j])) {
this.maleLike[i].isChecked = true
break
}
}
}
this.oldArr = e.detail.value // 把当前返回值赋值给上⼀次的返回值
}
}
下⾯是css样式代码：
.content-class {
width: 90%;
margin: 20upx auto;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
.item {
width: 30%;
height: 60upx;
font-size: 28upx;
line-height: 60upx;
border-radius: 30upx;
margin-bottom: 20upx;
text-align: center;
box-sizing: border-box;
border: 1upx solid #3f82e7;
checkbox {
display: none;
}
}
.on {
border: none;
background-color: #3f82e7;
color: #fff;
}
}
最终的效果图
如果有不懂的⼩伙伴可以⾃⼰打印⼀下做判断的⼏个变量，应该就能懂我为什么写这么多判断了，代码贴的⽐较详细，希望可以帮到你们