仿CSDN实现添加可自定义标签

<view class="weui-cell weui-cell_active">
							<view class="weui-cell__hd"><label class="weui-label">擅长领域</label></view>
							<view class="weui-cell__bd">
								<view class="tagContainer">
									<view class="tag-item" v-bind:key="index" v-for="(tagText,index) in tagList">
										<text :data-text="tagText">{{tagText}}</text>
										<text class="tagDelIcon" @tap="delTag(tagText,index)"
											:data-text="tagText">x</text>
									</view>
									<view class="tag-item add-tag" @click="dialog = !dialog">
										+标签
									</view>
								</view>
							</view>
						</view>


<view class="container" v-if="dialog">
							<view class="input-Box">
								<input class="uni-input" placeholder="请输入文字搜索,回车可添加自定义标签" @confirm="addTag"
									v-model="tag" placeholder-class="placeholder" border @input="getTagListByName">
							</view>
							<view class="tagContainer">
								<view class="tag-item2" :class="item.isSelected?'active':''" v-bind:key="index"
									v-for="(item,index) in tagArrList" @click="tapTag2(item)">
									<text :data-text="item.name">{{item.name}}</text>
								</view>
							</view>
</view>

data(){
	return{
		tagArrList: [],
		allTagList: [],
		dialog: false,
		tagList: [],
	}
},
onLoad(){
	this.getTagList()
},
methods:{
getTagListByName() {
				setTimeout(() => {
					this.tagArrList = this.allTagList.filter(r => {
						return r.name.indexOf(this.tag) != -1
					})
				}, 300)
			},
			addTag() {
				if (this.tag !== '' && this.tagList.indexOf(this.tag) < 0) {
					this.tagList.push(this.tag);
					this.tag = ''
				}
			},
			delTag(tagText, index) {
				this.tagArrList.map((r, index) => {
					if (tagText == r.name) {
						r.isSelected = false;
						return
					}
				})
				this.tagList.splice(index, 1);
			},
			tapTag2(item) {
				item.isSelected = !item.isSelected;
				if (item.isSelected == true) {
					this.tagList.push(item.name);
				} else {
					this.tagList.map((r, index) => {
						if (item.name == r) {
							this.tagList.splice(index, 1);
							return
						}
					})
				}
			},
			getTagList(){
			//查询   给tagArrList和allTagList赋值
			}

}

.tagContainer {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.tag-item,
	.tag-item2 {
		padding: 10rpx 20rpx;
		margin: 10rpx;
		border-radius: 10rpx;
		color: white;
		background-color: #55aaff;
		font-size: 22rpx;
	}

	.tag-item2 {
		background-color: #bedeff;
	}


	.add-tag {
		color: black;
		background-color: #ffffff;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
		font-size: 20rpx;
		border: 1px #000000 solid;
	}

	.tagDelIcon {
		padding-left: 20rpx;
	}
	.input-Box {
			margin: 20rpx 10rpx;
		}
	.active {
			background-color: #55aaff;
			color: #ffffff;
		}

效果图

原文地址：https://www.jb51.cc/wenti/3286565.html