引入
import Vue from 'vue';
import { Sku } from 'vant';
Vue.use(Sku);
代碼演示
基礎(chǔ)用法
<van-sku
v-model="show"
:sku="sku"
:goods="goods"
:goods-id="goodsId"
:quota="quota"
:quota-used="quotaUsed"
:hide-stock="sku.hide_stock"
:message-config="messageConfig"
@buy-clicked="onBuyClicked"
@add-cart="onAddCartClicked"
/>
export default {
data() {
return {
show: false,
sku: {
// 數(shù)據(jù)結(jié)構(gòu)見下方文檔
},
goods: {
// 數(shù)據(jù)結(jié)構(gòu)見下方文檔
},
messageConfig: {
// 數(shù)據(jù)結(jié)構(gòu)見下方文檔
}
};
}
}
自定義步進(jìn)器
<van-sku
v-model="show"
:sku="sku"
:goods="goods"
:goods-id="goodsId"
:quota="quota"
:quota-used="quotaUsed"
:hide-stock="sku.hide_stock"
:custom-stepper-config="customStepperConfig"
@buy-clicked="onBuyClicked"
@add-cart="onAddCartClicked"
/>
高級用法
<van-sku
v-model="show"
stepper-title="我要買"
:sku="sku"
:goods="goods"
:goods-id="goodsId"
:quota="quota"
:quota-used="quotaUsed"
:hide-stock="sku.hide_stock"
show-add-cart-btn
reset-stepper-on-hide
:initial-sku="initialSku"
@buy-clicked="onBuyClicked"
@add-cart="onAddCartClicked"
>
<!-- 自定義 sku-header-price -->
<template slot="sku-header-price" slot-scope="props">
<div class="van-sku__goods-price">
<span class="van-sku__price-symbol">¥</span><span class="van-sku__price-num">{{ props.price }}</span>
</div>
</template>
<!-- 自定義 sku actions -->
<template slot="sku-actions" slot-scope="props">
<div class="van-sku-actions">
<van-button
square
size="large"
type="warning"
@click="onPointClicked"
>
積分兌換
</van-button>
<!-- 直接觸發(fā) sku 內(nèi)部事件,通過內(nèi)部事件執(zhí)行 onBuyClicked 回調(diào) -->
<van-button
square
size="large"
type="danger"
@click="props.skuEventBus.$emit('sku:buy')"
>
買買買
</van-button>
</div>
</template>
</van-sku>
API
Props
參數(shù) | 說明 | 類型 | 默認(rèn)值 |
---|
v-model | 是否顯示sku | boolean | false |
sku | 商品sku數(shù)據(jù) | object | - |
goods | 商品信息 | object | - |
goods-id | 商品 id | number | string | - |
price-tag | 顯示在價格后面的標(biāo)簽 | string | - |
hide-stock | 是否顯示商品剩余庫存 | boolean | false |
hide-quota-text | 是否顯示限購提示 | boolean | false |
hide-selected-text | 是否隱藏已選提示 | boolean | false |
stock-threshold | 庫存閾值。低于這個值會把庫存數(shù)高亮顯示 | boolean | 50 |
show-add-cart-btn | 是否顯示加入購物車按鈕 | boolean | true |
buy-text | 購買按鈕文字 | string | 立即購買 |
add-cart-text | 加入購物車按鈕文字 | string | 加入購物車 |
quota | 限購數(shù),0 表示不限購 | number | 0 |
quota-used | 已經(jīng)購買過的數(shù)量 | number | 0 |
reset-stepper-on-hide | 隱藏時重置選擇的商品數(shù)量 | boolean | false |
reset-selected-sku-on-hide | 隱藏時重置已選擇的 sku | boolean | false |
disable-stepper-input | 是否禁用步進(jìn)器輸入 | boolean | false |
close-on-click-overlay | 是否在點(diǎn)擊遮罩層后關(guān)閉 | boolean | false |
stepper-title | 數(shù)量選擇組件左側(cè)文案 | string | 購買數(shù)量 |
custom-stepper-config | 步進(jìn)器相關(guān)自定義配置 | object | {} |
message-config | 留言相關(guān)配置 | object | {} |
get-container | 指定掛載的節(jié)點(diǎn),用法示例 | string | () => Element | - |
initial-sku | 默認(rèn)選中的 sku,具體參考高級用法 | object | {} |
show-soldout-sku | 是否展示售罄的 sku,默認(rèn)展示并置灰 | boolean | true |
safe-area-inset-bottom v2.2.1 | 是否開啟 底部安全區(qū)適配 | boolean | false |
start-sale-num v2.3.0 | 起售數(shù)量 | number | 1 |
properties v2.4.2 | 商品屬性 | array | - |
Events
事件名 | 說明 | 回調(diào)參數(shù) |
---|
add-cart | 點(diǎn)擊添加購物車回調(diào) | skuData: object |
buy-clicked | 點(diǎn)擊購買回調(diào) | skuData: object |
stepper-change | 購買數(shù)量變化時觸發(fā) | value: number |
sku-selected | 切換規(guī)格類目時觸發(fā) | { skuValue, selectedSku, selectedSkuComb } |
sku-prop-selected | 切換商品屬性時觸發(fā) | { propValue, selectedProp, selectedSkuComb } |
open-preview | 打開商品圖片預(yù)覽時觸發(fā) | data: object |
close-preview | 關(guān)閉商品圖片預(yù)覽時觸發(fā) | data: object |
方法
通過 ref 可以獲取到 Sku 實例并調(diào)用實例方法,詳見 組件實例方法
方法名 | 說明 | 參數(shù) | 返回值 |
---|
getSkuData | 獲取當(dāng)前 skuData | - | skuData |
resetSelectedSku v2.3.0 | 重置選中規(guī)格到初始狀態(tài) | - | - |
Slots
Sku 組件默認(rèn)劃分好了若干區(qū)塊,這些區(qū)塊都定義成了插槽,可以按需進(jìn)行替換。區(qū)塊順序見下表:
名稱 | 說明 |
---|
sku-header | 商品信息展示區(qū),包含商品圖片、名稱、價格等信息 |
sku-header-price | 自定義 sku 頭部價格展示 |
sku-header-origin-price | 自定義 sku 頭部原價展示 |
sku-header-extra | 額外 sku 頭部區(qū)域 |
sku-body-top | sku 展示區(qū)上方的內(nèi)容,無默認(rèn)展示內(nèi)容,按需使用 |
sku-group | 商品 sku 展示區(qū) |
extra-sku-group | 額外商品 sku 展示區(qū),一般用不到 |
sku-stepper | 商品數(shù)量選擇區(qū) |
sku-messages | 商品留言區(qū) |
sku-actions | 操作按鈕區(qū) |
sku 對象結(jié)構(gòu)
sku: {
// 所有sku規(guī)格類目與其值的從屬關(guān)系,比如商品有顏色和尺碼兩大類規(guī)格,顏色下面又有紅色和藍(lán)色兩個規(guī)格值。
// 可以理解為一個商品可以有多個規(guī)格類目,一個規(guī)格類目下可以有多個規(guī)格值。
tree: [
{
k: '顏色', // skuKeyName:規(guī)格類目名稱
v: [
{
id: '30349', // skuValueId:規(guī)格值 id
name: '紅色', // skuValueName:規(guī)格值名稱
imgUrl: 'https://img.yzcdn.cn/1.jpg', // 規(guī)格類目圖片,只有第一個規(guī)格類目可以定義圖片
previewImgUrl: 'https://img.yzcdn.cn/1p.jpg', // 用于預(yù)覽顯示的規(guī)格類目圖片
},
{
id: '1215',
name: '藍(lán)色',
imgUrl: 'https://img.yzcdn.cn/2.jpg',
previewImgUrl: 'https://img.yzcdn.cn/2p.jpg',
}
],
k_s: 's1' // skuKeyStr:sku 組合列表(下方 list)中當(dāng)前類目對應(yīng)的 key 值,value 值會是從屬于當(dāng)前類目的一個規(guī)格值 id
}
],
// 所有 sku 的組合列表,比如紅色、M 碼為一個 sku 組合,紅色、S 碼為另一個組合
list: [
{
id: 2259, // skuId,下單時后端需要
price: 100, // 價格(單位分)
s1: '1215', // 規(guī)格類目 k_s 為 s1 的對應(yīng)規(guī)格值 id
s2: '1193', // 規(guī)格類目 k_s 為 s2 的對應(yīng)規(guī)格值 id
s3: '0', // 最多包含3個規(guī)格值,為0表示不存在該規(guī)格
stock_num: 110 // 當(dāng)前 sku 組合對應(yīng)的庫存
}
],
price: '1.00', // 默認(rèn)價格(單位元)
stock_num: 227, // 商品總庫存
collection_id: 2261, // 無規(guī)格商品 skuId 取 collection_id,否則取所選 sku 組合對應(yīng)的 id
none_sku: false, // 是否無規(guī)格商品
messages: [
{
// 商品留言
datetime: '0', // 留言類型為 time 時,是否含日期。'1' 表示包含
multiple: '0', // 留言類型為 text 時,是否多行文本。'1' 表示多行
name: '留言', // 留言名稱
type: 'text', // 留言類型,可選: id_no(身份證), text, tel, date, time, email
required: '1', // 是否必填 '1' 表示必填
placeholder: '' // 可選值,占位文本
}
],
hide_stock: false // 是否隱藏剩余庫存
}
properties 對象結(jié)構(gòu)
[ // 商品屬性
{
k_id: 123, // 屬性id
k: '加料', // 屬性名
is_multiple: true, // 是否可多選
v: [
{
id: 1222, // 屬性值id
name: '珍珠', // 屬性值名
price: 1, // 屬性值加價
},
{
id: 1223,
name: '椰果',
price: 1,
}
],
}
]
initialSku 對象結(jié)構(gòu)
{
// 鍵:skuKeyStr(sku 組合列表中當(dāng)前類目對應(yīng)的 key 值)
// 值:skuValueId(規(guī)格值 id)
s1: '30349',
s2: '1193',
// 初始選中數(shù)量
selectedNum: 3,
// 初始選中的商品屬性
// 鍵:屬性id
// 值:屬性值id列表
selectedProp: {
123: [1222]
}
}
goods 對象結(jié)構(gòu)
goods: {
// 商品標(biāo)題
title: '測試商品',
// 默認(rèn)商品 sku 縮略圖
picture: 'https://img.yzcdn.cn/1.jpg'
}
customStepperConfig 對象結(jié)構(gòu)
customStepperConfig: {
// 自定義限購文案
quotaText: '每次限購xxx件',
// 自定義步進(jìn)器超過限制時的回調(diào)
handleOverLimit: (data) => {
const { action, limitType, quota, quotaUsed, startSaleNum } = data;
if (action === 'minus') {
Toast(startSaleNum > 1 ? `${startSaleNum}件起售` : '至少選擇一件商品');
} else if (action === 'plus') {
// const { LIMIT_TYPE } = Sku.skuConstants;
if (limitType === LIMIT_TYPE.QUOTA_LIMIT) {
let msg = `單次限購${quota}件`;
if (quotaUsed > 0) msg += `,你已購買${quotaUsed}`;
Toast(msg);
} else {
Toast('庫存不夠了');
}
}
},
// 步進(jìn)器變化的回調(diào)
handleStepperChange: currentValue => {},
// 庫存
stockNum: 1999,
// 格式化庫存
stockFormatter: stockNum => {},
}
messageConfig Data Structure
messageConfig: {
// 圖片上傳回調(diào),需要返回一個promise,promise正確執(zhí)行的結(jié)果需要是一個圖片url
uploadImg: () => {
return new Promise((resolve) => {
setTimeout(() => resolve('https://img.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg'), 1000);
});
},
// 最大上傳體積 (MB)
uploadMaxSize: 3,
// placeholder 配置
placeholderMap: {
text: 'xxx',
tel: 'xxx',
...
}
}
添加購物車和點(diǎn)擊購買回調(diào)函數(shù)接收的 skuData 對象結(jié)構(gòu)
skuData: {
// 商品 id
goodsId: '946755',
// 留言信息
messages: {
message_0: '12',
message_1: ''
},
// 另一種格式的留言,key 不同
cartMessages: {
'留言1': 'xxxx'
},
// 選擇的商品數(shù)量
selectedNum: 1,
// 選擇的 sku 組合
selectedSkuComb: {
id: 2257,
price: 100,
s1: '30349',
s2: '1193',
s3: '0',
stock_num: 111,
properties: [
{
k_id: 123,
k: '加料',
is_multiple: true,
v: [
{
id: 1223,
name: '椰果',
price: 1
}
]
}
],
property_price: 1
},
}
更多建議: