当前位置：首页 > VUE

vue实现京东规格

2026-02-19 11:51:02VUE

Vue 实现京东规格选择功能

京东规格选择功能通常用于商品详情页，允许用户选择不同规格（如颜色、尺寸等）并实时更新价格和库存状态。以下是基于 Vue 的实现方法：

数据结构设计

商品规格数据通常为嵌套结构，包含规格分类（如颜色、尺寸）和具体规格项（如红色、黑色）。示例数据结构如下：

data() {
  return {
    product: {
      specs: [
        {
          name: '颜色',
          items: [
            { name: '红色', selected: false },
            { name: '黑色', selected: false }
          ]
        },
        {
          name: '尺寸',
          items: [
            { name: 'S', selected: false },
            { name: 'M', selected: false }
          ]
        }
      ],
      skus: [
        {
          specs: ['红色', 'S'],
          price: 99,
          stock: 10
        }
      ]
    },
    selectedSpecs: {}
  }
}

规格选择逻辑

通过点击事件切换规格项的选中状态，并更新已选规格对象：

methods: {
  selectSpec(specName, specValue) {
    this.$set(this.selectedSpecs, specName, specValue)

    this.product.specs.forEach(spec => {
      spec.items.forEach(item => {
        item.selected = this.selectedSpecs[spec.name] === item.name
      })
    })
  }
}

库存校验与价格更新

根据已选规格组合匹配 SKU，更新商品价格和库存状态：

computed: {
  currentSku() {
    return this.product.skus.find(sku => {
      return sku.specs.every(spec => 
        Object.values(this.selectedSpecs).includes(spec)
      )
    })
  },
  isAvailable() {
    return this.currentSku && this.currentSku.stock > 0
  }
}

模板渲染

使用 v-for 渲染规格分类和规格项，绑定点击事件和样式：

<div v-for="spec in product.specs" :key="spec.name">
  <h3>{{ spec.name }}</h3>
  <div class="spec-items">
    <span 
      v-for="item in spec.items" 
      :key="item.name"
      :class="{ active: item.selected }"
      @click="selectSpec(spec.name, item.name)"
    >
      {{ item.name }}
    </span>
  </div>
</div>

<div v-if="currentSku">
  <p>价格: {{ currentSku.price }}</p>
  <p :class="{ 'out-of-stock': !isAvailable }">
    {{ isAvailable ? '有货' : '缺货' }}
  </p>
</div>

样式处理

为选中状态和缺货状态添加视觉反馈：

.spec-items span {
  display: inline-block;
  padding: 5px 10px;
  margin-right: 10px;
  border: 1px solid #ddd;
  cursor: pointer;
}

.spec-items span.active {
  border-color: #f00;
  color: #f00;
}

.out-of-stock {
  color: #999;
}