vant-vue关于sku规格是说明，并不详情，从手册复制无法使用。git下载安装vant后的sku示例却很详情。
我剔除了高级用法，以下是基础用法示例：
sku.vue文件
<template> <div> <!-- 基础用法 --> <div class="sku-container"> <van-sku v-model="showBase" :sku="skuData.sku" :goods="skuData.goods_info" :goods-id="skuData.goods_id" :hide-stock="skuData.sku.hide_stock" :quota="skuData.quota" :quota-used="skuData.quota_used" :initial-sku="initialSku" //默认选中 reset-stepper-on-hide reset-selected-sku-on-hide disable-stepper-input :close-on-click-overlay="closeOnClickOverlay" :custom-sku-validator="customSkuValidator" @buy-clicked="onBuyClicked" @add-cart="onAddCartClicked" /> <van-button block type="primary" @click="showBase = true" > xxxx </van-button> </div> </div> </template> <script> import skuData from './data'; export default { data() { return { skuData:skuData, showBase: true, showCustom: false, showStepper: false, showSoldout: false, closeOnClickOverlay: true, initialSku: { s1: '30349', s2: '1193', selectedNum: 3 }, customSkuValidator: () => '请选择xxx!', }; }, methods: { onBuyClicked(data) { this.$toast('buy:' + JSON.stringify(data)); console.log(JSON.stringify(data)) }, onAddCartClicked(data) { this.$toast('add cart:' + JSON.stringify(data)); }, } }; </script> <style lang="less"> .demo-sku { .sku-container { padding: 0 15px; } } </style>
data.js文件
export default { sku: { // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。 // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。 tree: [ { k: '颜色', k_id: '1', v: [ { id: '30349', name: '天蓝色', imgUrl: 'https://img.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg' }, { id: '1215', name: '白色' } ], k_s: 's1', count: 2 }, { k: '尺寸', k_id: '2', v: [ { id: '1193', name: '1' }, { id: '1194', name: '2' } ], k_s: 's2', count: 2 } ], // 所有 sku 的组合列表，如下是：白色1、白色2、天蓝色1、天蓝色2 list: [ { id: 2259, price: 120, //价格 discount: 122, s1: '1215', s2: '1193', s3: '0', s4: '0', s5: '0', stock_num: 20, //库存 goods_id: 946755 }, { id: 2260, price: 110, discount: 112, s1: '1215', s2: '1194', s3: '0', s4: '0', s5: '0', stock_num: 2, //库存 goods_id: 946755 }, { id: 2257, price: 130, discount: 132, s1: '30349', s2: '1193', s3: '0', s4: '0', s5: '0', stock_num: 40, //库存 goods_id: 946755 }, { id: 2258, price: 100, discount: 100, s1: '30349', s2: '1194', s3: '0', s4: '0', s5: '0', stock_num: 50, //库存 goods_id: 946755 } ], price: '5.00', stock_num: 227, // 商品总库存 none_sku: false, // 是否无规格商品 hide_stock: false // 是否隐藏剩余库存 }, goods_id: '946755', quota: 3, //限购数量 quota_used: 0, //已经购买过的数量 goods_info