效果图

pPFwee0.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
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赋值
	}

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
.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;
	}