引入
import Vue from 'vue';
import { Sku } from 'vant';
Vue.use(Sku);
代码演示
基础用法
<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: {
// 数据结构见下方文档
},
goods: {
// 数据结构见下方文档
},
messageConfig: {
// 数据结构见下方文档
}
};
}
}
自定义步进器
<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>
<!-- 直接触发 sku 内部事件,通过内部事件执行 onBuyClicked 回调 -->
<van-button
square
size="large"
type="danger"
@click="props.skuEventBus.$emit('sku:buy')"
>
买买买
</van-button>
</div>
</template>
</van-sku>
API
Props
参数 | 说明 | 类型 | 默认值 |
---|
v-model | 是否显示sku | boolean | false |
sku | 商品sku数据 | object | - |
goods | 商品信息 | object | - |
goods-id | 商品 id | number | string | - |
price-tag | 显示在价格后面的标签 | string | - |
hide-stock | 是否显示商品剩余库存 | boolean | false |
hide-quota-text | 是否显示限购提示 | boolean | false |
hide-selected-text | 是否隐藏已选提示 | boolean | false |
stock-threshold | 库存阈值。低于这个值会把库存数高亮显示 | boolean | 50 |
show-add-cart-btn | 是否显示加入购物车按钮 | boolean | true |
buy-text | 购买按钮文字 | string | 立即购买 |
add-cart-text | 加入购物车按钮文字 | string | 加入购物车 |
quota | 限购数,0 表示不限购 | number | 0 |
quota-used | 已经购买过的数量 | number | 0 |
reset-stepper-on-hide | 隐藏时重置选择的商品数量 | boolean | false |
reset-selected-sku-on-hide | 隐藏时重置已选择的 sku | boolean | false |
disable-stepper-input | 是否禁用步进器输入 | boolean | false |
close-on-click-overlay | 是否在点击遮罩层后关闭 | boolean | false |
stepper-title | 数量选择组件左侧文案 | string | 购买数量 |
custom-stepper-config | 步进器相关自定义配置 | object | {} |
message-config | 留言相关配置 | object | {} |
get-container | 指定挂载的节点,用法示例 | string | () => Element | - |
initial-sku | 默认选中的 sku,具体参考高级用法 | object | {} |
show-soldout-sku | 是否展示售罄的 sku,默认展示并置灰 | boolean | true |
safe-area-inset-bottom v2.2.1 | 是否开启 底部安全区适配 | boolean | false |
start-sale-num v2.3.0 | 起售数量 | number | 1 |
properties v2.4.2 | 商品属性 | array | - |
Events
事件名 | 说明 | 回调参数 |
---|
add-cart | 点击添加购物车回调 | skuData: object |
buy-clicked | 点击购买回调 | skuData: object |
stepper-change | 购买数量变化时触发 | value: number |
sku-selected | 切换规格类目时触发 | { skuValue, selectedSku, selectedSkuComb } |
sku-prop-selected | 切换商品属性时触发 | { propValue, selectedProp, selectedSkuComb } |
open-preview | 打开商品图片预览时触发 | data: object |
close-preview | 关闭商品图片预览时触发 | data: object |
方法
通过 ref 可以获取到 Sku 实例并调用实例方法,详见 组件实例方法
方法名 | 说明 | 参数 | 返回值 |
---|
getSkuData | 获取当前 skuData | - | skuData |
resetSelectedSku v2.3.0 | 重置选中规格到初始状态 | - | - |
Slots
Sku 组件默认划分好了若干区块,这些区块都定义成了插槽,可以按需进行替换。区块顺序见下表:
名称 | 说明 |
---|
sku-header | 商品信息展示区,包含商品图片、名称、价格等信息 |
sku-header-price | 自定义 sku 头部价格展示 |
sku-header-origin-price | 自定义 sku 头部原价展示 |
sku-header-extra | 额外 sku 头部区域 |
sku-body-top | sku 展示区上方的内容,无默认展示内容,按需使用 |
sku-group | 商品 sku 展示区 |
extra-sku-group | 额外商品 sku 展示区,一般用不到 |
sku-stepper | 商品数量选择区 |
sku-messages | 商品留言区 |
sku-actions | 操作按钮区 |
sku 对象结构
sku: {
// 所有sku规格类目与其值的从属关系,比如商品有颜色和尺码两大类规格,颜色下面又有红色和蓝色两个规格值。
// 可以理解为一个商品可以有多个规格类目,一个规格类目下可以有多个规格值。
tree: [
{
k: '颜色', // skuKeyName:规格类目名称
v: [
{
id: '30349', // skuValueId:规格值 id
name: '红色', // skuValueName:规格值名称
imgUrl: 'https://img.yzcdn.cn/1.jpg', // 规格类目图片,只有第一个规格类目可以定义图片
previewImgUrl: 'https://img.yzcdn.cn/1p.jpg', // 用于预览显示的规格类目图片
},
{
id: '1215',
name: '蓝色',
imgUrl: 'https://img.yzcdn.cn/2.jpg',
previewImgUrl: 'https://img.yzcdn.cn/2p.jpg',
}
],
k_s: 's1' // skuKeyStr:sku 组合列表(下方 list)中当前类目对应的 key 值,value 值会是从属于当前类目的一个规格值 id
}
],
// 所有 sku 的组合列表,比如红色、M 码为一个 sku 组合,红色、S 码为另一个组合
list: [
{
id: 2259, // skuId,下单时后端需要
price: 100, // 价格(单位分)
s1: '1215', // 规格类目 k_s 为 s1 的对应规格值 id
s2: '1193', // 规格类目 k_s 为 s2 的对应规格值 id
s3: '0', // 最多包含3个规格值,为0表示不存在该规格
stock_num: 110 // 当前 sku 组合对应的库存
}
],
price: '1.00', // 默认价格(单位元)
stock_num: 227, // 商品总库存
collection_id: 2261, // 无规格商品 skuId 取 collection_id,否则取所选 sku 组合对应的 id
none_sku: false, // 是否无规格商品
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 对象结构
[ // 商品属性
{
k_id: 123, // 属性id
k: '加料', // 属性名
is_multiple: true, // 是否可多选
v: [
{
id: 1222, // 属性值id
name: '珍珠', // 属性值名
price: 1, // 属性值加价
},
{
id: 1223,
name: '椰果',
price: 1,
}
],
}
]
initialSku 对象结构
{
// 键:skuKeyStr(sku 组合列表中当前类目对应的 key 值)
// 值:skuValueId(规格值 id)
s1: '30349',
s2: '1193',
// 初始选中数量
selectedNum: 3,
// 初始选中的商品属性
// 键:属性id
// 值:属性值id列表
selectedProp: {
123: [1222]
}
}
goods 对象结构
goods: {
// 商品标题
title: '测试商品',
// 默认商品 sku 缩略图
picture: 'https://img.yzcdn.cn/1.jpg'
}
customStepperConfig 对象结构
customStepperConfig: {
// 自定义限购文案
quotaText: '每次限购xxx件',
// 自定义步进器超过限制时的回调
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('库存不够了');
}
}
},
// 步进器变化的回调
handleStepperChange: currentValue => {},
// 库存
stockNum: 1999,
// 格式化库存
stockFormatter: stockNum => {},
}
messageConfig Data Structure
messageConfig: {
// 图片上传回调,需要返回一个promise,promise正确执行的结果需要是一个图片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',
...
}
}
添加购物车和点击购买回调函数接收的 skuData 对象结构
skuData: {
// 商品 id
goodsId: '946755',
// 留言信息
messages: {
message_0: '12',
message_1: ''
},
// 另一种格式的留言,key 不同
cartMessages: {
'留言1': 'xxxx'
},
// 选择的商品数量
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
},
}