当前位置：首页 > VUE

vue实现选择商品规格

2026-01-21 14:01:25VUE

实现商品规格选择功能

在Vue中实现商品规格选择功能通常需要结合组件化开发和数据绑定。以下是一种常见的实现方式：

数据结构设计

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

data() {
  return {
    product: {
      specs: [
        {
          name: '颜色',
          values: ['红色', '黑色', '白色']
        },
        {
          name: '尺寸',
          values: ['S', 'M', 'L']
        }
      ],
      variants: [
        { color: '红色', size: 'S', price: 100 },
        { color: '红色', size: 'M', price: 120 }
      ]
    },
    selectedSpecs: {}
  }
}

规格选择组件

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

<template>
  <div class="spec-selector">
    <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>
  </div>
</template>

<script>
export default {
  props: ['specs', 'selectedSpecs'],
  methods: {
    selectSpec(name, value) {
      this.$emit('spec-selected', { name, value })
    }
  }
}
</script>

规格联动逻辑

实现规格间的联动选择和库存验证：

methods: {
  handleSpecSelected({ name, value }) {
    this.$set(this.selectedSpecs, name, value)
    this.checkAvailability()
  },

  checkAvailability() {
    const selected = this.selectedSpecs
    const available = this.product.variants.some(variant => {
      return Object.keys(selected).every(key => variant[key] === selected[key])
    })

    if (!available) {
      // 处理不可用情况
    }
  }
}

完整示例

将组件整合到商品页面：

<template>
  <div>
    <spec-selector
      :specs="product.specs"
      :selected-specs="selectedSpecs"
      @spec-selected="handleSpecSelected"
    />

    <div v-if="currentVariant">
      当前选择：{{ currentVariant }} 价格：{{ currentVariant.price }}
    </div>
  </div>
</template>

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

export default {
  components: { SpecSelector },
  computed: {
    currentVariant() {
      const selected = this.selectedSpecs
      return this.product.variants.find(variant => 
        Object.keys(selected).every(key => variant[key] === selected[key])
      )
    }
  }
}
</script>

样式优化

添加基础CSS增强用户体验：

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

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

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

这种实现方式提供了灵活的商品规格选择功能，支持多规格联动和库存验证，可根据实际需求进一步扩展。

vue实现选择商品规格