当前位置：首页 > VUE

vue实现选择商品规格

2026-02-22 05:24:31VUE

Vue 实现商品规格选择功能

商品规格选择是电商类应用的核心功能之一，通常涉及颜色、尺寸、版本等属性的联动选择。以下是基于 Vue 的实现方案：

数据结构设计

采用嵌套结构存储规格和规格值，例如：

data() {
  return {
    specs: [
      {
        name: '颜色',
        values: ['红色', '黑色', '金色'],
        selected: null
      },
      {
        name: '内存',
        values: ['64GB', '128GB', '256GB'],
        selected: null
      }
    ],
    skus: [
      { color: '红色', memory: '64GB', price: 5999, stock: 10 },
      { color: '黑色', '128GB', price: 6499, stock: 5 }
    ]
  }
}

规格选择组件

创建可复用的规格选择组件：

<template>
  <div class="spec-selector">
    <div v-for="spec in specs" :key="spec.name">
      <h4>{{ spec.name }}</h4>
      <button 
        v-for="value in spec.values"
        :key="value"
        @click="selectSpec(spec.name, value)"
        :class="{ active: spec.selected === value }"
        :disabled="!isAvailable(spec.name, value)"
      >
        {{ value }}
      </button>
    </div>
  </div>
</template>

联动逻辑实现

通过计算属性处理规格间的联动：

computed: {
  availableCombinations() {
    return this.skus.filter(sku => {
      return this.specs.every(spec => 
        !spec.selected || sku[spec.name] === spec.selected
      )
    })
  }
},
methods: {
  isAvailable(specName, value) {
    const tempSpecs = this.specs.map(spec => {
      return spec.name === specName 
        ? { ...spec, selected: value }
        : spec
    })

    return this.skus.some(sku => {
      return tempSpecs.every(spec => 
        !spec.selected || sku[spec.name] === spec.selected
      )
    })
  },
  selectSpec(name, value) {
    const spec = this.specs.find(s => s.name === name)
    spec.selected = spec.selected === value ? null : value
  }
}

库存状态显示

实时显示当前选择的库存状态：

computed: {
  currentSku() {
    return this.skus.find(sku => 
      this.specs.every(spec => 
        !spec.selected || sku[spec.name] === spec.selected
      )
    )
  }
}

样式优化

添加基础样式增强用户体验：

.spec-selector button {
  margin: 5px;
  padding: 8px 12px;
  border: 1px solid #ddd;
  background: white;
  cursor: pointer;
}

.spec-selector button.active {
  border-color: #ff6700;
  color: #ff6700;
}

.spec-selector button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}