uni-app自定义多选组件

<!-- 多选组件 -->
<template>
	<view class="">
		<input v-model="selectVal" class="t_a_r" :placeholder="selectClolr" name="input" disabled @tap="visModel"></input>
		<view class="cu-modal bottom-modal" :class="showModel ? 'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white">
					<view class="action text-green" @tap="resultTag">重置</view>
					<view class="action text-blue" @tap="hideModal">确定</view>
				</view>
				<view class="padding-xl" style="display: flex;flex-wrap: wrap;">
					<view class="padding-xs" v-for="(item,index) in tagList" :key="index">
						<view @tap="clickTag(index,tagList)" class='cu-tag round'
						:style="{'background-color': item.status ? '#000000' : '','color': item.status ? '#F2F2F2' : '' }">{{item.name}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
props:{
	selectClolr: { //占位输入框， 字段为提示语
		type: String,
		default: '请选择所需服务'
	},
    tagList: {
        type: Array,
        default: []
    }
},
data () {
	return {
		showModel: false,
		selectVal: ''
	}
},
methods: {
    hideModal () {
		this.showModel = false
	},
	visModel () {
	    if(this.tagList.length == 0) this.getMenuList()
		this.showModel = true
	},
	resultTag () {
		this.tagList.map(item => {
			return item.status = false
		})
		this.selectVal = ''
		this.$emit('closeData',this.tagList)
	},
	clickTag (v,list) {
		list[v].status = !list[v].status
		let name = []
		let code = []
		list.map(item => {
			if(item.status){
				name.push(item.name)
			}
		})
		this.selectVal = name.join(',')
		this.$emit('closeData',this.tagList)
	}
}
</script>

// 这里要注意，个别情况会出现点击后不更新状态，这是因为vue的机制问题，没有深度监听

//this.$forceUpdate() 加上这个 强制vue更新就好

// 本文有引用color-ui的弹窗样式