sku选中项 | 易学教程

确定SKU

在我们设计sku数据的时候，就已经添加了一个字段：indexes：

这其实就是规格参数的索引组合。

而我们在页面中，用户点击选择规格后，就会把对应的索引保存起来：

因此，我们可以根据这个indexes来确定用户要选择的sku

我们在vue中定义一个计算属性，来计算与索引匹配的sku：

computed:{
    sku(){
        const index = Object.values(this.indexes).join("_");
        return this.skus.find(s => s.indexes == index);
    }
}

在浏览器工具中查看：

渲染sku列表

既然已经拿到了用户选中的sku，接下来，就可以在页面渲染数据了

图片列表

商品图片是一个字符串，以,分割，页面展示比较麻烦，所以我们编写一个计算属性：images()，将图片字符串变成数组：

computed: {
    sku(){
        const index = Object.values(this.indexes).join("_");
        return this.skus.find(s=>s.indexes==index);
    },
    images(){
        return this.sku.images ? this.sku.images.split(",") : [''];
    }
},

页面改造：

<div class="zoom">
   <!--默认第一个预览-->
   <div id="preview" class="spec-preview">
      <span class="jqzoom">
         <img :jqimg="images[0]" :src="images[0]" width="400px" height="400px"/>
      </span>
   </div>
   <!--下方的缩略图-->
   <div class="spec-scroll">
      <a class="prev">&lt;</a>
      <!--左右按钮-->
      <div class="items">
         <ul>
            <li v-for="(image, i) in images" :key="i">
               <img :src="image" :bimg="image" οnmοusemοve="preview(this)" />
            </li>
         </ul>
      </div>
      <a class="next">&gt;</a>
   </div>
</div>

效果：

标题和价格

完整效果

来源：CSDN

作者：Leon_Jinhai_Sun

链接：https://blog.csdn.net/Leon_Jinhai_Sun/article/details/104213437

标签

sku