当前位置：首页 > VUE

vue实现商品规格

2026-02-18 02:20:54VUE

Vue 实现商品规格功能

商品规格功能通常包括规格选择、价格联动、库存联动等。以下是实现商品规格的常见方法：

数据结构设计

商品规格数据通常采用树形结构，例如：

data() {
  return {
    specs: [
      {
        name: '颜色',
        values: ['红色', '蓝色', '绿色']
      },
      {
        name: '尺寸',
        values: ['S', 'M', 'L']
      }
    ],
    skus: [
      { color: '红色', size: 'S', price: 100, stock: 10 },
      { color: '红色', size: 'M', price: 120, stock: 5 }
    ]
  }
}

规格选择组件实现

创建可交互的规格选择组件：

vue实现商品规格

<template>
  <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>
</template>

<script>
export default {
  data() {
    return {
      selected: {}
    }
  },
  methods: {
    selectSpec(name, value) {
      this.$set(this.selected, name, value)
      this.$emit('change', this.selected)
    },
    isSelected(name, value) {
      return this.selected[name] === value
    }
  }
}
</script>

价格和库存联动

根据选择的规格匹配SKU数据：

computed: {
  currentSku() {
    const selectedValues = Object.values(this.selected)
    if (selectedValues.length !== this.specs.length) return null

    return this.skus.find(sku => {
      return this.specs.every(spec => {
        return sku[spec.name.toLowerCase()] === this.selected[spec.name]
      })
    })
  }
}

完整示例

整合以上功能的完整示例：

vue实现商品规格

<template>
  <div>
    <spec-selector 
      :specs="specs" 
      @change="onSpecChange"
    />

    <div v-if="currentSku">
      <p>价格: {{ currentSku.price }}</p>
      <p>库存: {{ currentSku.stock }}</p>
    </div>
    <div v-else>
      <p>请选择完整规格</p>
    </div>
  </div>
</template>

<script>
import SpecSelector from './SpecSelector.vue'

export default {
  components: { SpecSelector },
  data() {
    return {
      specs: [
        { name: '颜色', values: ['红色', '蓝色'] },
        { name: '尺寸', values: ['S', 'M'] }
      ],
      skus: [
        { color: '红色', size: 'S', price: 100, stock: 10 },
        { color: '红色', size: 'M', price: 120, stock: 5 }
      ],
      selected: {}
    }
  },
  computed: {
    currentSku() {
      const selectedValues = Object.values(this.selected)
      if (selectedValues.length !== this.specs.length) return null

      return this.skus.find(sku => {
        return this.specs.every(spec => {
          const specName = spec.name.toLowerCase()
          return sku[specName] === this.selected[spec.name]
        })
      })
    }
  },
  methods: {
    onSpecChange(selected) {
      this.selected = selected
    }
  }
}
</script>

高级功能扩展

禁用无库存规格：

computed: {
disabledSpecs() {
 const disabled = {}
 this.specs.forEach(spec => {
   disabled[spec.name] = {}
   spec.values.forEach(value => {
     disabled[spec.name][value] = !this.hasStockForSpec(spec.name, value)
   })
 })
 return disabled
}
},
methods: {
hasStockForSpec(specName, specValue) {
 return this.skus.some(sku => {
   return sku[specName.toLowerCase()] === specValue && sku.stock > 0
 })
}
}

规格图片展示：

data() {
return {
 specs: [
   {
     name: '颜色',
     values: [
       { name: '红色', image: 'red.jpg' },
       { name: '蓝色', image: 'blue.jpg' }
     ]
   }
 ]
}
}