uniapp写微信小程序——多标签选择和删除

<template>
	<view class="contianer">
	    <view  @click="open">请选择</view>
		    <view class="time_contain" v-else>
				<view class="time_box">
					<view class="time_item" v-for="(item,index) in foodAttrIds" :key="index">{{item.name}}
					<view class="icon" @click="cancleLable(item)"> >>> <uv-icon name="close-circle-fill" color="rgba(58, 98, 255, 1)"></uv-icon></view>
				</view>
			</view>
		</view>
		<!--客户标签 弹窗 -->
		<uv-popup ref="popup" mode="bottom"  :close-on-click-overlay="false">
			<view class="label_box">
				<view class="title">选择标签</view>
				<view class="cancle" @click="close">取消</view>
			</view>
			<view class="label_detail">
				<view v-for="(item,index) in listType"  :key="index" class="label_gray" @click="onReplace(item)" 
				:class="{label_blue:foodAttrIds.indexOf(item)>=0}">
					{{item.name}}
				</view>
			</view>
			<view class="determine">
				<uv-button :custom-style="customStyle"  text="确定" @click="close"></uv-button>
			</view>
		</uv-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 选择标签
				listType:[{id:1,name:'标签1'},{id:2,name:'标签2'},{id:3,name:'标签3'}],
				// 选中的标签数组  起始没有标签选中
				foodAttrIds : [],
			};
		},
		methods:{
			// 打开标签抽屉
			open(){
				this.$refs.popup.open();
			},
			// 关闭标签抽屉
			close(){
				this.$refs.popup.close();
				// 如果时间便签组为空,则显示"请选择",否则显示标签
				if(this.foodAttrIds.length>0){
					this.select = false;
				}else{
					this.select = true;
				}
			},
			//选中标签则加入foodAttrIds[]
			//取消选中则从foodAttrIds[]删除
			onReplace(foodAttrId){
				
				var i = this.foodAttrIds.indexOf(foodAttrId);
                //在数组中，删除
				if(i>=0){
					this.foodAttrIds.splice(i,1);
				}else{
				//添加
					this.foodAttrIds.push(foodAttrId);
				}
			},
			// 标签的删除
			cancleLable(item){
				console.log(item);
				var i = this.foodAttrIds.indexOf(item);
				if(i>=0){
					this.foodAttrIds.splice(i,1);
				}
				if(this.foodAttrIds.length==0){
					this.select=true
				}
			},
		
		},
	}
</script>

<style lang="scss">
	.contianer{
		
		// 标签组 抽屉
		.label_box{
			padding: 0 30rpx;
			box-sizing: border-box;
			text-align: center;
			color: #333333FF;
			font-size: 33rpx;
			line-height: 70rpx;
			position: relative;
			.cancle{
				width: 20%;
				position: absolute;
				right: 0;
				top: 0;
			}
			
		}
		.determine{
			width: 90%;
			margin: 0 5%;
		}
		.label_detail{
			padding: 0px 30rpx;
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap;
			margin-top: 30rpx;
			margin-bottom: 46rpx;
			overflow: scroll;
			flex-flow: row;
			flex-wrap: wrap;
			font-size: 28rpx;
			.label_gray{
				padding: 15rpx 10rpx;
				box-sizing: border-box;
				border: 1px solid gray;
				text-align: center;
				border-radius: 10rpx;
				color: #707070;
				height: 74rpx;
				margin: 10rpx;
			}
			.label_blue{
				padding:15rpx 10rpx;
				box-sizing: border-box;
				border: 1px solid #3D6DFFFF;
				text-align: center;
				border-radius: 10rpx;
				color: #3D6DFFFF;
				height: 74rpx;
				margin: 10rpx;
			}
		}
		// 标签多选
		.time_contain{
			width: 396rpx;
			overflow-x: scroll;	
			.time_box{
				white-space:nowrap;
				height: 61rpx;
				.time_item{
					display: inline-block;
					padding: 0px 28rpx;
					background-color: #e7eefb;
					border-radius: 17rpx;
					margin-right: 10rpx;
					font-size: 25rpx;
					height: 50rpx;
					line-height: 50rpx;
					position: relative;
					margin-top: 10rpx;
					.icon{
					    position: absolute;
					    right: -6rpx;
					    top: -4rpx;
					}
				}
			}
		}
	}
</style>