vue中制作多选加单选的标签选择

前言

这个功能大家肯定都会用过或者见过，因为在逛淘宝的时候会有标签选择的功能，当然，咱们这篇文章就是来让大家学习这个功能，这个功能的话在很多地方都能用的到，希望大家仔细阅读。

一、效果展示

二、代码展示

<template>
  <div class="box">
    <p class="yx">
      已选条件
      <span v-for="(item,index) in yxx" :key="index">{{item}}</span>
    </p>
    <p>
      客户资质
      <span
        :class="{active:item.beal}"
        @click="zzk(index)"
        v-for="(item,index) in zz"
        :key="index"
      >{{item.name}}</span>
    </p>
    <p>
      客户状态
      <span
        v-for="(item,index) in wqr"
        @click="qw(index)"
        :class="{active:index==isShow1}"
        :key="index"
      >{{item}}</span>
    </p>
  </div>
</template>

<script>
let cun1 = "";
export default {
  data() {
    return {
      yxx: [],
      zz: [
        { name: "房", beal: false },
        { name: "车", beal: false },
        { name: "公积金", beal: false },
        { name: "社保", beal: false },
        { name: "保单", beal: false }
      ],
      wqr: ["沟通", "上门", "签约", "放款"],
      isShow1: NaN,
      value1: "",
      yx1: []
    };
  },
  methods: {
    zzk(e) {
      this.zz[e].beal = !this.zz[e].beal;  //点击后改变状态
      if (this.zz[e].beal == true) {
        this.yxx.push(this.zz[e].name);   //如果点击后是true那么直接添加
      } else {
        //如果不是true的话说明这个标签已经存在了，那么就要查找然后删除
        var index = this.yxx.map(item => item).indexOf(this.zz[e].name);
        if (index != -1) {
          this.yxx.splice(index, 1);
        }
      }
    },
    qw(e) {
      //声明一个变量来判断此时选项的状态
      var c = 0;
      this.isShow1 = e;
      //判断有没有选择
      for (var i = 0; i < this.wqr.length; i++) {
        for (var j = 0; j < this.yxx.length; j++) {
          if (this.wqr[i] == this.yxx[j]) {
            c = 1;
          }
        }
      }
      if (c == 1) {
        //第二次点击选择时发生的结果
        var index = this.yxx.map(item => item).indexOf(cun1);
        //删除上一个
        this.yxx.splice(index, 1);
        //添加这一个
        this.yxx.push(this.wqr[e]);
        //判断这一个是否还是跟上一个一样，是的话回到默认的样子
        if (cun1 == this.wqr[e]) {
          //一样的话重新查找这一个的下标
          var index1 = this.yxx.map(item => item).indexOf(this.wqr[e]);
          //查找之后进行恢复原来的样子
          this.yxx.splice(index1, 1);
          this.isShow1 = NaN;
        }
        //储存
        cun1 = this.wqr[e];
      } else {
        //如果没有选择那么进行第一次操作，只是点击添加
        this.yxx.push(this.wqr[e]);
        //储存
        cun1 = this.wqr[e];
      }
    }
  }
};
</script>
<style scoped>
.box{
  text-align: left;
}
p {
  margin-top: 10px;
  color: #2074a5;
  font-size: 14px;
}
p span {
  display: inline-block;
  padding: 0 10px;
  height: 20px;
  line-height: 20px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 1px 4px 0px rgba(141, 141, 141, 0.3);
  border-radius: 4px;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(34, 34, 34, 1);
  margin-left: 10px;
  cursor: pointer;
  min-width: 44px;
  text-align: center;
}
span.active {
  background: rgba(236, 173, 64, 1);
  color: #fff;
}
p.yx {
  color: #222;
}
p.yx span {
  display: inline-block;
  padding: 0 15px;
  height: 20px;
  line-height: 18px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(236, 173, 64, 1);
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  cursor: default;
  color: rgba(34, 34, 34, 1);
}
</style>

三、对这个功能的理解

这个功能主要就是判断选择标签时候会碰到的几种情况，当你把这几种情况在脑海中展示出来的时候，其实这个功能就已经完成了，在了就是数组的基本操作，添加、删除、查找，这些个都要熟练使用，因为能用到数组的地方真的太多了。

结语

希望这篇文章可以对你的项目有所帮助，在了感谢每一个能把作者文章认真看完的人