uniapp多选标签/多选按钮/多选框

Posted 2021-12-28 weixin_40228600

最近做了一个小项目功能，把部分源码解析一下，实现简单的多选标签，通过遍历的方式读取数据，并赋予多样式，直接上图显示

以上代码粘贴到项目中，可直接运行：

<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>

完整源码下载地址：》》》