uniapp多选标签/多选按钮/多选框
实现简单的多选标签按钮
·
最近做了一个小项目功能,把部分源码解析一下,实现简单的多选标签,通过遍历的方式读取数据,并赋予多样式,直接上图显示
以上代码粘贴到项目中,可直接运行:
<template>
<view class="">
<view class="page index">
<!-- 多选,循环遍历填充数据 -->
<view class="list-box">
<view v-for="(item,index) in list" :key="index" @click="choice(index)" :class="[item.selected?'selde':'noselde']">
{{item.selected?item.title:item.title}}
</view>
</view>
<!-- 选中的值 -->
<view class="valueList">
{{selectList}}
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
//定义前端选中的值
selectList:"",
//给标签赋值
list: [{
selected: false,
title: '标签1'
},
{
selected: false,
title: '标签2'
},
{
selected: false,
title: '标签3'
},
{
selected: false,
title: '标签4'
},
{
selected: false,
title: '标签5'
}, {
selected: false,
title: '标签6'
}
],
selectId: [],
};
},
methods: {
//选择按钮
choice(index) {
//当再次被选中时,取消当前选中项
if (this.list[index].selected == true) {
this.list[index].selected = false;
//取消选中时删除数组中的值
for (var i = 0; i < this.selectId.length; i++) {
if (this.selectId[i] === this.list[index].title) {
this.selectId.splice(i, 1);
}
}
this.selectList=this.selectId
console.log("选中的值", this.selectId)
} else {
this.list[index].selected = true;
this.selectId.push(this.list[index].title)
for (var i=0;i<this.selectId.length;i++) {
console.log("选中的值", this.selectId[i])
}
this.selectList=this.selectId
console.log("选中的值", this.selectId)
}
}
}
};
</script>
<!-- 样式表 -->
<style lang="scss">
.list-box {
display: flex;
flex-wrap: wrap;
padding: 16upx;
border-radius: 10upx;
view {
width: 20%;
height: 60upx;
line-height: 60upx;
text-align: center;
margin-top: 30upx;
&:not(:nth-child(3n)) {
margin-right: calc(10% / 2);
}
}
}
/* 已选择 */
.selde {
border: 1px solid red;
background: red;
color: #FFFFFF;
border-radius: 20upx;
font-size: 20upx;
padding: 0 10upx;
}
/* 未选择 */
.noselde {
border: 1px solid #959595;
background: #FFFFFF;
color: #959595;
border-radius: 20upx;
font-size: 20upx;
padding: 0 10upx;
}
.valueList{
margin-top: 20rpx;
padding: 20rpx;
display: flex;
justify-content: center;
}
</style>
更多推荐
已为社区贡献22条内容
所有评论(0)