vue实现sku
Vue实现SKU选择功能
SKU（Stock Keeping Unit）是商品库存管理的基本单位，在电商系统中常见于商品详情页的多规格选择。以下是基于Vue的实现方案：
核心数据结构设计
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>优化技巧
- 对于大型SKU数据集，考虑使用Map或对象来优化查找性能
- 添加规格图片支持，可在specs数据中添加image字段
- 实现规格的互斥逻辑，某些规格组合可能不存在
- 添加默认选中逻辑，自动选择第一个可用规格
- 对于移动端，可将规格选择改为弹窗形式
性能注意事项
- 避免在模板中进行复杂计算，使用computed属性
- 对于超多规格商品（如50+），考虑分步选择或服务端校验
- 使用v-if和v-show合理控制DOM渲染
- 大数据量情况下使用虚拟滚动
这种实现方式保持了组件化的优势，同时提供了良好的用户体验。可根据实际项目需求调整数据结构和交互细节。
