uni-app实现多选标签超出7项使用uni-popup

在前端中经常会有多选标签的功能需求本文中使用的是uinapp, 下面是我自己写的一个多选标签分享～～～

先来看看效果图(点击查看更多显示弹出层)：

1.html代码(本文中v-for未使用key字段仅供参考): 

<view class="pad-top-1 border-btm">
			<view class="out-1">请选择服务内容(多选)</view>
			<view class="flex">
				<view v-for="item,index in mainList[mainClass].children.slice(0,7)" :class="{'sub-btn':true,'sub-btn-active':chooseMainList.includes(item)}" @click="changeView(item)">{{item}}</view>

				<view class="sub-btn" @click="toggle">查看更多</view>
				<view class="sub-btn">
					<uni-popup type="bottom" ref="popup" backgroundColor="#fff">
						<view class="flex pad-top-1 pad-y-2 check-group">
							<view v-for="val,key in mainList[mainClass].children.slice(7)" :class="{'check-view':true,'sub-btn-active':chooseMainList.includes(val)}"  @click="changeView(val)">
									{{val}}
							</view>
						</view>
					</uni-popup>
				</view>

			</view>
		</view>

2.javascript代码(本文数据为编写的模拟数据没有唯一标识所直接用的内容字段): 

<script>
    export default{
        data(){
            return {
                mainList: [
					{title: '机械改装', children: ['普通机床', '数控机床', '加工中心', '铣床系列', '数控铣床', '钻床系列', '数控钻床', '查看更一', '查看更二', '查看更三', '查看更四', '查看更五', '查看更六', '查看更七']},
					{title: '电器改装', children: ['1普通机床', '1数控机床', '1加工中心', '1铣床系列', '1数控铣床', '1钻床系列', '1数控钻床', '1查看更一', '1查看更二', '1查看更三', '1查看更四', '1查看更五', '1查看更六', '1查看更七']},
					{title: '高级服务', children: ['2普通机床', '2数控机床', '2加工中心', '2铣床系列', '2数控铣床', '2钻床系列', '2数控钻床', '2查看更一', '2查看更二', '2查看更三', '2查看更四', '2查看更五', '2查看更六', '2查看更七']}
				],
                mainClass: 0, // 选中mainList数组中的第几类
                chooseMainList: [] // 存储选择的数据
            }
        },

        methods: {
            changeView(value){
				// 点击多选标签按钮触发此函数
				if(this.chooseMainList.includes(value)){
					// 如果选择的数组中有要删除
					// 1. 先找到该属性在数组的下标
					var indexOf;
					for(let i=0;i<=this.chooseMainList.length;i++){
						if(this.chooseMainList[i]===value){
							indexOf = i
						}
					}
					// 2. 从数组中删除此属性
					this.chooseMainList.splice(indexOf,1)
					console.log('数组含有--删除'+value,this.chooseMainList)
				}else{
					// 如果没有就往数组里添加
					this.chooseMainList.push(value)
					console.log('数组没有--添加'+value,this.chooseMainList)
				}
			}
        }
    }
</script>

css代码我就不复制了大家可以自己去写～～～