2020-12-23 vue js实现标签选中样式

记录效果如图：

实现过程：

 .pug(html)

      .row(:gutter='10')
        el-col(:span='5')
          span.reminder-text 商品标签:
        el-col(:span='20').skuTagsArea
          .tagGroup(v-for='(item, index) in tagAll')
            .tagName {
   
   {item.tagName}}
            .sku-tags
              .tag-span(
                v-for='(tag, ind) in item.tags'
                :class="{select: selectTagId[index] && selectTagId[index].key === tag.key && selectTagId[index].active}"
                @click='selectTag(index, ind)') {
   
   {tag.tag}}

.js

  data() {
    return {
      ...
      tagAll: [{
        tagName: '辣度标签',
        tags: [
          {
            tag: '微辣',
            key: 24,
            active: true,
          },
          {
            tag: '中辣',
            key: 25,
            active: false,
          },
          {
            tag: '特辣',
            key: 26,
            active: false,
          },
        ],
      },
      {
        tagName: '包子口味标签',
        tags: [
          {
            tag: '甜包',
            key: 27,
            active: false,
          },
          {
            tag: '辣包',
            key: 28,
            active: false,
          },
          {
            tag: '酸辣',
            key: 29,
            active: false,
          },
          {
            tag: '原味',
            key: 30,
            active: false,
          },
          {
            tag: '咸包',
            key: 31,
            active: false,
          },
        ],
      }], // 所有标签
      selectTagId: [], // 所有选中tag的id
    };
  },

...

    // 标签选择
    selectTag(index, ind) {
      this.selectTagId[index] = this.tagAll[index].tags[ind]; // 获取选中的id
      const isActive = this.tagAll[index].tags[ind].active;
      this.selectTagId[index].active = !isActive;
      // 数组是引用类型，对其中一个变量直接赋值不会影响到另一个变量（并未操作引用的对象），使用concat（操作了引用对象）
      this.selectTagId = R.concat([], this.selectTagId);
    },

.scss

.row {
  display: flex;
}

.sku-tags {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  max-width: 100%;
}

.skuTagsArea {
  display: flex;
  flex-direction: column;
}

.tagName{
  margin-left: 10px;
  font-weight: 500;
  font-size: 14px;
  border-bottom: 2px dotted #dcdfe6;
  margin-top: 5px;
}

.tagGroup{
  margin-right: 10px;
  margin-top: 10px;
  padding: 0px 10px 5px 0;
  border: 1px solid #dcdfe6;
  border-radius: 10px;
}

.tag-span {
  padding: 5px 10px;
  background-color: rgb(139, 136, 136);
  color: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 10px;
  margin: 5px 5px 5px 10px;
  min-width: 10%;
  max-width: 100%;
  cursor: pointer;
}

.select {
  background-color: lightsalmon;
}