vue实现多规格商品

Vue实现多规格商品功能

多规格商品（如不同颜色、尺寸组合）在电商系统中很常见，Vue可以高效实现这类动态交互功能。

数据模型设计

典型的多规格数据结构包含SKU（库存单位）和规格组合：

data() {
  return {
    product: {
      skus: [
        {id: 1, price: 199, stock: 10, specs: ['红色', 'XL']},
        {id: 2, price: 299, stock: 5, specs: ['蓝色', 'L']}
      ],
      specGroups: [
        {name: '颜色', items: ['红色', '蓝色']},
        {name: '尺寸', items: ['XL', 'L']}
      ]
    },
    selectedSpecs: {}
  }
}

规格选择交互

使用v-for渲染规格选项，并处理选择逻辑：

<div v-for="group in product.specGroups" :key="group.name">
  <h4>{{ group.name }}</h4>
  <button 
    v-for="item in group.items"
    :key="item"
    @click="selectSpec(group.name, item)"
    :class="{active: selectedSpecs[group.name] === item}"
  >
    {{ item }}
  </button>
</div>

选择状态管理

实现规格选择方法并计算当前SKU：

methods: {
  selectSpec(name, value) {
    this.$set(this.selectedSpecs, name, value)
  }
},
computed: {
  currentSku() {
    return this.product.skus.find(sku => 
      sku.specs.every(spec => 
        Object.values(this.selectedSpecs).includes(spec)
      )
    )
  }
}

库存和价格展示

根据当前选择的SKU显示动态信息：

<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>

规格禁用逻辑

当某些规格组合无库存时禁用选项：

computed: {
  isSpecAvailable() {
    return (groupName, specValue) => {
      const tempSpecs = {...this.selectedSpecs, [groupName]: specValue}
      return this.product.skus.some(sku => 
        sku.stock > 0 && 
        sku.specs.every(spec => 
          Object.values(tempSpecs).includes(spec)
        )
      )
    }
  }
}

可视化优化

添加CSS样式增强交互体验：

button.active {
  border: 2px solid #42b983;
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

这种实现方式完整覆盖了多规格商品的核心功能，包括动态选择、库存联动和状态管理。可根据实际需求扩展SKU预览图切换、规格组合生成等高级功能。