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

注意事项

1. 当规格维度变化时需要清空已选状态
2. 缺货规格应禁用点击操作
3. 移动端需考虑触摸反馈效果
4. 复杂规格建议使用SKU矩阵算法处理