为了账号安全,请及时绑定邮箱和手机立即绑定

使用Vue实现标签多选功能(一)

2019.01.26 16:20 5157浏览

前言

由于技术水平菜,在工作开发中经常遇到伤脑筋的业务需求。比如在选取多个标签时,除了要得到标签的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这个属性,它保证了两次点击同一个标签能达到取消、样式改变、不再重新添加数据的功能。

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

点击查看更多内容
4人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消