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

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

 参考官方文档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
  };
});

 其中 min="props.selectedSkuComb.onceMinimum" :max="props.selectedSkuComb.onceMaximum" 

v-model="props.selectedSkuComb.selectNum"

在sku.list中定义

写法按照源码node_modules>vant>lib>sku>components>SkuStepper