Vue3项目中实现相同属性的互斥点击,与自我点击选中与消除选中状态

效果1:相同属性的互斥点击

效果2:自我点击选中与取消选中的状态

代码实现:

自我点中与取消的逻辑分析:

        1.选中的状态时是有一个类名:selected

        2.但是后台的数据中并没有标志符号来区分是否选中,这个时候需要自己添加一个类名

        3.添加点击事件实现标识符的切换false与true,由此来确定是否选中

 

互斥的效果逻辑分析:

        1.点击事件中,将渲染的数据list全部传递过来

        2.过滤出点中的自己

        3.将兄弟的标识符selected都设置为false

 全部代码:

<template>
  <div class="goods-sku">
    <dl v-for="(item, i) in specs" :key="i">
      <dt>{{ item.name }}</dt>
      <dd>
        <template v-for="(tag, i) in item.values" :key="i">
          <!-- 遍历规格的选项 -->
          <img
            :class="{ selected: tag.selected }"
            :src="tag.picture"
            alt=""
            v-if="tag.picture"
            @click="toggle(tag, item.values)"
          />
          <span v-else :class="{ selected: tag.selected }" @click="toggle(tag, item.values)">{{ tag.name }}</span>
        </template>
      </dd>
    </dl>
  </div>
</template>
<script>
import { ref } from 'vue'
export default {
  name: 'GoodsSku',
  props: {
    specs: {
      type: Array,
      default: () => []
    }
  },
  setup(props) {
    const selected = ref(false)
    // const bro = ref(null) ?????
    const toggle = (tag, list) => {
      // tag中本没有selected 但是点击事件之后tag.selected没有就是undefined,所以取反之后就是true
      tag.selected = !tag.selected
      // bro.value = list.filter(item => item !== tag)
      // bro.value.selected = false
      list.forEach(item => {
        if (item !== tag) {
          item.selected = false
        }
      })
    }

    return { selected, toggle }
  }
}
</script>
<style scoped lang="less">
.sku-state-mixin () {
  border: 1px solid #e4e4e4;
  margin-right: 10px;
  cursor: pointer;
  &.selected {
    border-color: @xtxColor;
  }
  &.disabled {
    opacity: 0.6;
    border-style: dashed;
    cursor: not-allowed;
  }
}
.goods-sku {
  padding-left: 10px;
  padding-top: 20px;
  dl {
    display: flex;
    padding-bottom: 20px;
    align-items: center;
    dt {
      width: 50px;
      color: #999;
    }
    dd {
      flex: 1;
      color: #666;
      > img {
        width: 50px;
        height: 50px;
        .sku-state-mixin ();
      }
      > span {
        display: inline-block;
        height: 30px;
        line-height: 28px;
        padding: 0 20px;
        .sku-state-mixin ();
      }
    }
  }
}
</style>