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预览图切换、规格组合生成等高级功能。
