当前位置：首页 > VUE

vue实现商品sku

2026-01-18 07:02:32VUE

Vue 实现商品 SKU 选择功能

数据结构设计

商品 SKU 通常由多个属性组合而成，例如颜色、尺寸等。需要设计一个嵌套数据结构来存储这些信息。

data() {
  return {
    skuData: {
      colors: ['红色', '蓝色', '绿色'],
      sizes: ['S', 'M', 'L'],
      // 库存信息，key 为属性组合
      stock: {
        '红色-S': 10,
        '红色-M': 5,
        '蓝色-L': 8
        // 其他组合...
      }
    },
    selected: {
      color: '',
      size: ''
    }
  }
}

模板渲染

使用 v-for 循环渲染可选的 SKU 属性，并通过计算属性判断哪些选项可选。

<div class="sku-selector">
  <div class="attribute">
    <h3>颜色</h3>
    <button 
      v-for="color in skuData.colors" 
      :key="color"
      @click="selectAttribute('color', color)"
      :class="{ active: selected.color === color, disabled: !isAttributeAvailable('color', color) }"
    >
      {{ color }}
    </button>
  </div>

  <div class="attribute">
    <h3>尺寸</h3>
    <button 
      v-for="size in skuData.sizes" 
      :key="size"
      @click="selectAttribute('size', size)"
      :class="{ active: selected.size === size, disabled: !isAttributeAvailable('size', size) }"
    >
      {{ size }}
    </button>
  </div>
</div>

交互逻辑实现

实现属性选择和库存检查的方法。

methods: {
  selectAttribute(type, value) {
    this.selected[type] = value
    this.checkCombination()
  },

  isAttributeAvailable(type, value) {
    const tempSelected = { ...this.selected }
    tempSelected[type] = value
    const combination = this.getCombinationKey(tempSelected)
    return this.skuData.stock[combination] > 0
  },

  getCombinationKey(selected) {
    return `${selected.color}-${selected.size}`
  },

  checkCombination() {
    const combination = this.getCombinationKey(this.selected)
    if (this.skuData.stock[combination]) {
      console.log('当前选择有库存')
    } else {
      console.log('当前选择无库存')
    }
  }
}

样式处理

为选中的状态和不可选状态添加样式区分。

.sku-selector button {
  margin: 5px;
  padding: 8px 12px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
}

.sku-selector button.active {
  border-color: #ff6700;
  color: #ff6700;
}

.sku-selector button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

完整示例改进

对于更复杂的 SKU 情况，可以使用递归组件处理多级属性。

// SKU 组件
Vue.component('sku-selector', {
  props: ['attributes', 'selected', 'stock'],
  template: `
    <div class="sku-attribute">
      <h3>{{ attributes.name }}</h3>
      <div class="sku-values">
        <button
          v-for="value in attributes.values"
          :key="value"
          @click="$emit('select', attributes.name, value)"
          :class="{
            active: selected[attributes.name] === value,
            disabled: !isAvailable(attributes.name, value)
          }"
        >
          {{ value }}
        </button>
      </div>
    </div>
  `,
  methods: {
    isAvailable(name, value) {
      const temp = { ...this.selected, [name]: value }
      return this.checkStock(temp)
    },
    checkStock(selected) {
      const key = Object.values(selected).join('-')
      return this.stock[key] > 0
    }
  }
})