vue2,vant2使用slot自定义组件sku步进器sku-stepper

瑞士山下

已于 2022-08-16 17:00:22 修改

阅读量867

点赞数

文章标签： vue.js 前端 javascript

于 2022-08-16 11:45:46 首次发布

本文链接：https://blog.csdn.net/xxfdcgfhvgbjhnjmk/article/details/126362536

版权

该功能可以实现限制每个规格商品单次最少购买量和最多购买量

参考官方文档Vant 2 - Mobile UI Components built on Vue

<!-- 自定义 sku stepper -->
<template #sku-stepper="props">
  <div class="van-sku-stepper-stock">
    <div class="van-sku-stepper-container">
      <div class="van-sku__stepper-title">购买数量</div>
      <div class="van-sku__stepper">
        <van-stepper v-model="props.selectedSkuComb.selectNum" :min="props.selectedSkuComb.onceMinimum" :max="props.selectedSkuComb.onceMaximum" integer
                     @change="props.skuEventBus.$emit('sku:numChange',props.selectedSkuComb.selectNum)"/>
      </div>
    </div>
  </div>
</template>

sku.list = linkProduct.map(item => {
  return {
    id: item.productId,
    price: item.salePrice * 100,
    s1: item.productId,
    stock_num: item.inventory-item.saleVolume||1000,
    onceMinimum:item.onceMinimum||1,
    onceMaximum:item.onceMaximum||1000,
    selectNum:item.onceMinimum||1
  };
});