vue实现规格属性
Vue 实现规格属性（SKU 选择器）
在电商项目中，规格属性（如颜色、尺寸等）的选择通常通过 SKU 选择器实现。以下是基于 Vue 的实现方案：
数据结构设计
规格属性和 SKU 数据通常采用以下格式：
data() {
return {
specs: [
{ name: '颜色', values: ['红色', '蓝色'] },
{ name: '尺寸', values: ['S', 'M', 'L'] }
],
skus: [
{ id: 1, specs: { 颜色: '红色', 尺寸: 'S' }, stock: 10 },
{ id: 2, specs: { 颜色: '蓝色', 尺寸: 'M' }, stock: 5 }
]
}
}动态渲染规格选项
通过 v-for 循环渲染规格和可选值，并绑定点击事件：
<div v-for="spec in specs" :key="spec.name">
<h3>{{ spec.name }}</h3>
<button
v-for="value in spec.values"
:key="value"
@click="selectSpec(spec.name, value)"
:class="{ active: isSelected(spec.name, value) }"
>
{{ value }}
</button>
</div>选择状态管理
记录用户选择的规格组合，并检查是否匹配有效 SKU：
methods: {
selectSpec(specName, value) {
this.selectedSpecs = { ...this.selectedSpecs, [specName]: value };
this.checkAvailability();
},
isSelected(specName, value) {
return this.selectedSpecs[specName] === value;
},
checkAvailability() {
const matchedSku = this.skus.find(sku => {
return Object.keys(this.selectedSpecs).every(
key => sku.specs[key] === this.selectedSpecs[key]
);
});
this.available = matchedSku ? matchedSku.stock > 0 : false;
}
}禁用不可选选项
根据库存动态禁用无法组合的选项：
computed: {
disabledSpecs() {
const disabled = {};
this.specs.forEach(spec => {
spec.values.forEach(value => {
const tempSpecs = { ...this.selectedSpecs, [spec.name]: value };
disabled[`${spec.name}-${value}`] = !this.skus.some(sku =>
Object.keys(tempSpecs).every(
key => sku.specs[key] === tempSpecs[key]
)
);
});
});
return disabled;
}
}在模板中绑定 :disabled 属性：
<button
:disabled="disabledSpecs[`${spec.name}-${value}`]"
>
{{ value }}
</button>完整示例
整合后的组件逻辑可通过 Codepen 或 Codesandbox 查看在线示例，核心思路是：
- 通过嵌套循环渲染规格和选项
- 维护已选规格的对象状态
- 实时计算可选组合与库存状态
此方案可扩展为多级规格联动，适用于大多数电商场景。
