当前位置：首页 > VUE

vue实现sku

2026-03-27 12:35:05VUE

Vue实现SKU选择功能

SKU（Stock Keeping Unit）是商品库存管理的基本单位，在电商系统中常见于商品详情页的多规格选择。以下是基于Vue的实现方案：

vue实现sku

核心数据结构设计

data() {
  return {
    skuData: {
      // 规格类别（如颜色、尺寸）
      specs: [
        {
          name: '颜色',
          values: ['红色', '蓝色', '绿色']
        },
        {
          name: '尺寸',
          values: ['S', 'M', 'L']
        }
      ],
      // 所有SKU组合
      skus: [
        { color: '红色', size: 'S', stock: 10, price: 100 },
        { color: '红色', size: 'M', stock: 5, price: 120 }
      ],
      // 用户当前选择
      selected: {
        color: '',
        size: ''
      }
    }
  }
}

规格选择交互实现

<div v-for="spec in skuData.specs" :key="spec.name">
  <h3>{{ spec.name }}</h3>
  <button 
    v-for="value in spec.values"
    :key="value"
    @click="selectSpec(spec.name, value)"
    :class="{ active: selected[spec.name.toLowerCase()] === value }"
    :disabled="!isSpecAvailable(spec.name, value)"
  >
    {{ value }}
  </button>
</div>

可用性校验方法

methods: {
  isSpecAvailable(specName, specValue) {
    const tempSelected = { ...this.selected }
    tempSelected[specName.toLowerCase()] = specValue

    return this.skuData.skus.some(sku => {
      return Object.keys(tempSelected).every(key => {
        return !tempSelected[key] || sku[key] === tempSelected[key]
      })
    })
  },

  selectSpec(specName, specValue) {
    this.selected[specName.toLowerCase()] = specValue
  }
}

显示当前SKU信息

computed: {
  currentSku() {
    return this.skuData.skus.find(sku => {
      return Object.keys(this.selected).every(key => {
        return sku[key] === this.selected[key]
      })
    })
  }
}

完整商品信息展示

<div v-if="currentSku">
  <p>价格：{{ currentSku.price }}</p>
  <p>库存：{{ currentSku.stock }}</p>
  <button :disabled="currentSku.stock <= 0">加入购物车</button>
</div>
<div v-else>
  <p>请选择完整规格</p>
</div>