使用Vue实现标签多选功能（一）

前言

由于技术水平菜，在工作开发中经常遇到伤脑筋的业务需求。比如在选取多个标签时，除了要得到标签的ID，还需要改变该标签的样式；并且再次点击相同的标签时，移除该标签的id以及样式；同时还要控制选取标签的数量。具体的开发页面如下图（标签布局请自动忽略掉…）

开发步骤

我们先看一下HTML结构代码

<div class="tips-list">
  <span
    v-for="(item,index) of tags"
    :key="index"
    @click="selectTag(index,item.tagId)"
    :class="{seActive: arr[index]}"
    >{{item.tagName}}</span>
</div>
<h1 class="click-count">
  <span>已选择：</span>
  <span class="sub-title" :class="{spanActive:tagIds.length>0}">{{tagIds.length}}/3标签</span>
</h1>

再来看看与之相关的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这个属性，它保证了两次点击同一个标签能达到取消、样式改变、不再重新添加数据的功能。

其实代码都是非常基础的，主要就是思路的问题。觉得逻辑很绕的，多看几遍，多测几次就行，或者用一种更好的方式来实现一样可以。