当前位置：首页 > VUE

vue实现多规格选择

2026-02-22 20:28:15VUE

Vue 实现多规格选择的实现方法

数据结构的定义

使用嵌套对象或数组来存储规格信息，例如商品可能有颜色、尺寸等规格。每个规格下包含多个可选值。

data() {
  return {
    product: {
      name: '商品名称',
      specs: [
        {
          name: '颜色',
          values: ['红色', '蓝色', '绿色']
        },
        {
          name: '尺寸',
          values: ['S', 'M', 'L']
        }
      ],
      variants: [
        { color: '红色', size: 'S', price: 100, stock: 10 },
        { color: '红色', size: 'M', price: 110, stock: 5 }
      ]
    },
    selectedSpecs: {}
  }
}

规格选择交互实现

通过 v-for 渲染规格选项，并使用 v-model 绑定用户选择。为每个规格添加点击事件，更新已选规格。

<div v-for="spec in product.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>

规格组合校验

根据用户选择的规格组合，检查是否存在对应的商品变体。计算属性可以实时响应选择变化。

computed: {
  currentVariant() {
    const selectedKeys = Object.keys(this.selectedSpecs)
    if (selectedKeys.length !== this.product.specs.length) return null

    return this.product.variants.find(variant => {
      return selectedKeys.every(key => variant[key] === this.selectedSpecs[key])
    })
  }
}

库存状态显示

根据当前选中的变体显示库存状态，禁用无库存的规格选项。

methods: {
  isSpecAvailable(specName, specValue) {
    const tempSpecs = { ...this.selectedSpecs, [specName]: specValue }
    const selectedKeys = Object.keys(tempSpecs)

    if (selectedKeys.length < this.product.specs.length) return true

    return this.product.variants.some(variant => {
      return selectedKeys.every(key => variant[key] === tempSpecs[key]) 
        && variant.stock > 0
    })
  }
}

完整示例整合

将上述功能整合成完整的组件，包含价格显示、库存提示和加入购物车等交互。

<template>
  <div class="product-spec">
    <h2>{{ product.name }}</h2>

    <div v-for="spec in product.specs" :key="spec.name" class="spec-group">
      <h3>{{ spec.name }}</h3>
      <div class="spec-options">
        <button
          v-for="value in spec.values"
          :key="value"
          @click="selectSpec(spec.name, value)"
          :class="{ 
            active: selectedSpecs[spec.name] === value,
            disabled: !isSpecAvailable(spec.name, value)
          }"
        >
          {{ value }}
        </button>
      </div>
    </div>

    <div v-if="currentVariant" class="variant-info">
      <p>价格: {{ currentVariant.price }}</p>
      <p>库存: {{ currentVariant.stock }}</p>
      <button @click="addToCart">加入购物车</button>
    </div>
    <div v-else>
      <p>请选择完整规格</p>
    </div>
  </div>
</template>