vue sku product specifications multiple selections

vue sku商品规格多选

1. Create a data object to store the selected status of the SKU. For example, you can use an array to represent the selected SKU, each element represents the id of a SKU option.

data() {
  return {
    selectedOptions: []
  }
}

2. In the SKU option list, use v-bind:class to bind a calculated attribute to determine whether the current option is selected. If selected, add a highlighted CSS class.

<div v-for="option in options" :key="option.id" :class="{'highlighted': isSelected(option.id)}">
  <!-- SKU选项内容 -->
</div>

3. When the SKU option is clicked, trigger a method to update the selected status. You can use v-on:click to bind a method and switch the selected state in the method.

<div v-for="option in options" :key="option.id" :class="{'highlighted': isSelected(option.id)}" @click="toggleOption(option.id)">
  <!-- SKU选项内容 -->
</div>


methods: {
 isSelected(optionId) {
    return this.selectedOptions.includes(optionId);
  },
  toggleOption(optionId) {
    if (this.selectedOptions.includes(optionId)) {
      // 如果已经选中，则取消选中
      this.selectedOptions = this.selectedOptions.filter(id => id !== optionId);
    } else {
      // 如果未选中，则添加选中
      this.selectedOptions.push(optionId);
    }
  }
}

通过以上步骤，在Vue中可以实现SKU多选高亮的效果。当用户点击某个SKU选项时

The search only retains the latest 9 items to eliminate duplicates and empty items.

<template>
  <div class="home">
    <div class="search">
      <van-search
        v-model="value"
        placeholder="请输入搜索关键词"
        @clear="clear"
        @search="search"
      />
    </div>
    <div>
      <div class="flex-s">
        <div>搜索历史</div>
        <div><img alt="" src="../../assets/images/order/[email protected]" /></div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    components: {},
    data() {
      return {
        value: '',
        searchHistory: [],
      }
    },
    computed: {},
    mounted() {},
    methods: {
      // 搜索
      search(val) {
        console.log(val)
        if (val) {
          this.addSearchRecord(val)
        }
      },
      // 清空
      clear() {
        this.value = ''
      },
      addSearchRecord(record) {
        // 判断记录是否已存在于数组中
        const index = this.searchHistory.indexOf(record)
        if (index !== -1) {
          // 如果已存在，则先将其从数组中删除
          this.searchHistory.splice(index, 1)
        }

        // 将记录添加到数组开头
        this.searchHistory.unshift(record)

        // 控制搜索历史最多只存储9条记录
        if (this.searchHistory.length > 9) {
          this.searchHistory = this.searchHistory.slice(0, 9)
        }
        console.log(this.searchHistory)
      },
    },
  }
</script>

<style lang="scss" scoped>
  .home {
    height: 100vh;
    overflow: hidden;
    background: #fff;
    .search {
      padding: 24px 0;
      margin-bottom: 20px;
      border-bottom: 1px solid #eeeeee;
      ::v-deep {
        .van-search {
          margin: 0 24px;
          display: -webkit-box;
          display: -webkit-flex;
          display: flex;
          -webkit-box-align: center;
          -webkit-align-items: center;
          align-items: center;
          box-sizing: border-box;
          height: 72px;
          background: #ffffff;
          border: 2px solid #dddddd;
          border-radius: 46px;
        }
        .van-search__content {
          display: -webkit-box;
          display: -webkit-flex;
          display: flex;
          -webkit-box-flex: 1;
          -webkit-flex: 1;
          flex: 1;
          padding-left: 12px;
          background-color: #ffffff;
          border-radius: 2px;
        }
      }
    }
  }
  .flex {
    display: flex;
  }
  .flex-s {
    display: flex;
    justify-content: space-between;
  }
</style>