vue实现商品尺寸规格
实现商品尺寸规格的Vue方案
数据模型设计
商品规格通常包含多个维度（如颜色、尺寸），需设计嵌套数据结构：
data() {
return {
specs: [
{
name: '颜色',
values: ['红色', '蓝色', '黑色']
},
{
name: '尺寸',
values: ['S', 'M', 'L', 'XL']
}
],
selectedSpecs: {}
}
}规格选择组件
使用动态渲染方式生成规格按钮：
<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: selectedSpecs[spec.name] === value }"
>
{{ value }}
</button>
</div>选择逻辑处理
实现规格选择与联动逻辑：
methods: {
selectSpec(name, value) {
this.$set(this.selectedSpecs, name, value)
this.checkStock()
},
checkStock() {
// 根据选中的规格组合查询库存
const key = Object.values(this.selectedSpecs).join('-')
// 调用API检查库存状态
}
}库存状态显示
根据规格组合显示库存信息：
<div v-if="Object.keys(selectedSpecs).length === specs.length">
当前选择：{{ Object.values(selectedSpecs).join(' ') }}
<span :class="stockStatus">{{ stockText }}</span>
</div>完整示例
组合上述代码的完整组件示例：
export default {
data() {
return {
specs: [], // 从API获取
selectedSpecs: {},
stock: 0
}
},
computed: {
stockText() {
return this.stock > 0 ? `有货（${this.stock}件）` : '缺货'
},
stockStatus() {
return this.stock > 0 ? 'in-stock' : 'out-of-stock'
}
},
methods: {
async checkStock() {
if (Object.keys(this.selectedSpecs).length === this.specs.length) {
const res = await api.getStock(this.selectedSpecs)
this.stock = res.data.stock
}
}
}
}样式处理
建议使用CSS变量管理规格按钮状态：
button.active {
background: var(--primary-color);
color: white;
}
.in-stock { color: green; }
.out-of-stock { color: red; }注意事项
- 当规格维度变化时需要清空已选状态
- 缺货规格应禁用点击操作
- 移动端需考虑触摸反馈效果
- 复杂规格建议使用SKU矩阵算法处理
