代码演示

    基础用法

    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.   // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
    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' 表示包含
    40.       multiple: '0', // 留言类型为 text 时，是否多行文本。'1' 表示多行
    41.       name: '留言', // 留言名称
    42.       type: 'text', // 留言类型，可选: id_no（身份证）, text, tel, date, time, email
    43.       required: '1' // 是否必填 '1' 表示必填
    45.   ],
    46.   hide_stock: false // 是否隐藏剩余库存
    47. }

    goods 对象结构

    1.   // 商品标题
    2.   title: '测试商品',
    3.   // 默认商品 sku 缩略图
    4.   picture: 'https://img.yzcdn.cn/1.jpg'
    5. }

    customStepperConfig 对象结构

    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.   }
    16. }

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

    1. skuData: {
    2.   // 商品 id
    3.   goodsId: '946755',
    4.   // 留言信息
    5.   messages: {
    6.     message_0: '12',
    7.     message_1: ''
    8.   },
    9.   // 另一种格式的留言，key 不同
    10.   cartMessages: {
    11.     '留言1': 'xxxx'
    12.   },
    13.   // 选择的商品数量
    14.   selectedNum: 1,
    15.   // 选择的 sku 组合
    16.   selectedSkuComb: {
    17.     id: 2257,
    18.     price: 100,
    19.     s1: '30349',
    20.     s2: '1193',
    21.     s3: '0',
    22.     stock_num: 111
    23.   }
    24. }