代码演示

    基础用法

    2.   v-model="showBase"
    3.   :sku="sku"
    4.   :goods="goods"
    5.   :goods-id="goodsId"
    6.   :hide-stock="sku.hide_stock"
    7.   :quota="quota"
    8.   :quota-used="quotaUsed"
    9.   :reset-stepper-on-hide="resetStepperOnHide"
    10.   :reset-selected-sku-on-hide="resetSelectedSkuOnHide"
    11.   :close-on-click-overlay="closeOnClickOverlay"
    12.   :disable-stepper-input="disableStepperInput"
    13.   :message-config="messageConfig"
    14.   @buy-clicked="onBuyClicked"
    15.   @add-cart="onAddCartClicked"
    16. />

    自定义步进器相关配置

    1. <van-sku
    2.   v-model="showBase"
    3.   :sku="sku"
    4.   :goods="goods"
    5.   :goods-id="goodsId"
    6.   :hide-stock="sku.hide_stock"
    7.   :quota="quota"
    8.   :quota-used="quotaUsed"
    9.   :custom-stepper-config="customStepperConfig"
    10.   @buy-clicked="onBuyClicked"
    11.   @add-cart="onAddCartClicked"
    12. />

    高级用法

    Event

    Slot

    sku 对象结构

    1.   // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
    2.   // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
    3.   tree: [
    4.     {
    5.       k: '颜色', // skuKeyName：规格类目名称
    6.       v: [
    7.         {
    8.           id: '30349', // skuValueId：规格值 id
    9.           name: '红色', // skuValueName：规格值名称
    10.           imgUrl: 'https://img.yzcdn.cn/1.jpg' // 规格类目图片，只有第一个规格类目可以定义图片
    11.         },
    12.         {
    13.           id: '1215',
    14.           name: '蓝色',
    15.           imgUrl: 'https://img.yzcdn.cn/2.jpg'
    16.         }
    17.       ],
    18.       k_s: 's1' // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
    19.     }
    20.   ],
    21.   // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
    22.   list: [
    23.     {
    24.       id: 2259, // skuId，下单时后端需要
    25.       price: 100, // 价格（单位分）
    26.       s1: '1215', // 规格类目 k_s 为 s1 的对应规格值 id
    27.       s2: '1193', // 规格类目 k_s 为 s2 的对应规格值 id
    28.       s3: '0', // 最多包含3个规格值，为0表示不存在该规格
    29.       stock_num: 110 // 当前 sku 组合对应的库存
    30.     }
    31.   ],
    32.   price: '1.00', // 默认价格（单位元）
    33.   stock_num: 227, // 商品总库存
    34.   collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
    35.   none_sku: false, // 是否无规格商品
    36.   messages: [
    37.     {
    38.       // 商品留言
    39.       datetime: '0', // 留言类型为 time 时，是否含日期。'1' 表示包含
    41.       name: '留言', // 留言名称
    42.       type: 'text', // 留言类型，可选: id_no（身份证）, text, tel, date, time, email
    43.       required: '1' // 是否必填 '1' 表示必填
    44.     }
    45.   hide_stock: false // 是否隐藏剩余库存
    46. }

    initialSku 对象结构

    1. {
    2.   // 键：skuKeyStr（sku 组合列表中当前类目对应的 key 值）
    3.   // 值：skuValueId（规格值 id）
    4.   s1: '30349',
    5.   s2: '1193'
    6. }

    goods 对象结构

    customStepperConfig 对象结构

    1. customStepperConfig: {
    2.   // 自定义限购文案
    3.   quotaText: '每次限购xxx件',
    4.   // 自定义步进器超过限制时的回调
    5.   handleOverLimit: (data) => {
    6.     const { action, limitType, quota, quotaUsed } = data;
    8.     if (action === 'minus') {
    9.       Toast('至少选择一件商品');
    10.     } else if (action === 'plus') {
    11.       // const { LIMIT_TYPE } = Sku.skuConstants;
    12.       if (limitType === LIMIT_TYPE.QUOTA_LIMIT) {
    13.         let msg = `单次限购${quota}件`;
    14.         if (quotaUsed > 0) msg += `，你已购买${quotaUsed}`;
    15.         Toast(msg);
    16.       } else {
    17.         Toast('库存不够了');
    18.       }
    19.     }
    20.   }
    21. }

    messageConfig Data Structure

    1. messageConfig: {
    2.   // 图片上传回调，需要返回一个promise，promise正确执行的结果需要是一个图片url
    3.   uploadImg: () => {
    4.     return new Promise((resolve) => {
    5.       setTimeout(() => resolve('https://img.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg'), 1000);
    6.     });
    7.   },
    8.   // 最大上传体积 (MB)
    9.   uploadMaxSize: 3,
    10.   // placehold配置
    11.   placeholderMap: {
    12.     text: 'xxx',
    13.     tel: 'xxx',
    14.     ...
    15.   }

    添加购物车和点击购买回调函数接收的 skuData 对象结构