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