由于技术水平菜，在工作开发中经常遇到伤脑筋的业务需求。比如在选取多个标签时，除了要得到标签的ID，还需要改变该标签的样式；并且再次点击相同的标签时，移除该标签的id以及样式；同时还要控制选取标签的数量。具体的开发页面如下图（标签布局请自动忽略掉…）
我们先看一下HTML结构代码
v-for="(item,index) of tags"
:key="index"
@click="selectTag(index,item.tagId)"
:class="{seActive: arr[index]}"
>{{item.tagName}}
>已选择：
class="sub-title" :class="{spanActive:tagIds.length>0}">{{tagIds.length}}/3标签
再来看看与之相关的data代码
data() {
return {
tags: [],
arr: [],
tagIds: [],
lock: true, // 锁
}
}
最后再来看看核心的业务代码，首先是获取所有的标签数据，同时将arr数组中的数据全部填充为false
getTags() {
let datas = {};
// Answer为高度封装好的自定义HTTP请求对象
Answer.getTags(datas).then(res => {
this.tags = res.data;
for (let i = 0; i < this.tags.length; i++) {
this.arr.push(false);
}
});
}
接下来是点击标签事件
selectTag(index, tagId) {
this.lock = true;
for (let i = 0; i < this.tagIds.length; i++) {
if (this.tagIds[i] == tagId) {
this.tagIds.splice(i, 1);
this.lock = false;
}
}
for (let i = 0; i < this.arr.length; i++) {
if (this.tagIds.length >= 3) {
this.$toast({
message: "最多只能选择3个标签！",
position: "middle",
duration: 1000
});
return false;
}
if (i == index) {
this.arr[index] ? this.arr.splice(index, 1, false) : this.arr.splice(index, 1, true);
}
}
if (this.tagIds.length < 3 && this.lock) {
this.tagIds.push(tagId);
}
}
里面的逻辑很绕，核心在于lock这个属性，它保证了两次点击同一个标签能达到取消、样式改变、不再重新添加数据的功能。
其实代码都是非常基础的，主要就是思路的问题。觉得逻辑很绕的，多看几遍，多测几次就行，或者用一种更好的方式来实现一样可以。
