# Sku
### Install
```js
import Vue from 'vue';
import { Sku } from 'vant';
Vue.use(Sku);
```
## Usage
### Basic Usage
```html
<van-sku
v-model="show"
:sku="sku"
:goods="goods"
:goods-id="goodsId"
:hide-stock="sku.hide_stock"
:quota="quota"
:quota-used="quotaUsed"
:reset-stepper-on-hide="resetStepperOnHide"
:reset-selected-sku-on-hide="resetSelectedSkuOnHide"
:disable-stepper-input="disableStepperInput"
:message-config="messageConfig"
@buy-clicked="onBuyClicked"
@add-cart="onAddCartClicked"
/>
```
```js
export default {
data() {
return {
show: false,
sku: {},
goods: {},
messageConfig: {},
};
},
};
```
### Custom Stepper
```html
<van-sku
v-model="show"
:sku="sku"
:goods="goods"
:goods-id="goodsId"
:hide-stock="sku.hide_stock"
:quota="quota"
:quota-used="quotaUsed"
:custom-stepper-config="customStepperConfig"
@buy-clicked="onBuyClicked"
@add-cart="onAddCartClicked"
/>
```
### Custom By Slot
```html
<van-sku
v-model="show"
stepper-title="Stepper title"
:sku="sku"
:goods="goods"
:goods-id="goodsId"
:hide-stock="sku.hide_stock"
:quota="quota"
:quota-used="quotaUsed"
show-add-cart-btn
reset-stepper-on-hide
:initial-sku="initialSku"
@buy-clicked="onBuyClicked"
@add-cart="onAddCartClicked"
>
<!-- custom sku-header-price -->
<template #sku-header-price="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>
<!-- custom sku actions -->
<template #sku-actions="props">
<div class="van-sku-actions">
<van-button square size="large" type="warning" @click="onPointClicked">
Button
</van-button>
<!-- trigger sku inner event -->
<van-button
square
size="large"
type="danger"
@click="props.skuEventBus.$emit('sku:buy')"
>
Button
</van-button>
</div>
</template>
</van-sku>
```
## API
### Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| v-model | Whether to show sku | _boolean_ | `false` |
| sku | Sku data | _object_ | - |
| goods | Goods info | _object_ | - |
| goods-id | Goods id | `string | _number_ | - |
| price-tag | Tag behind the price | _string_ | - |
| hide-stock | Whether to hide stock | _boolean_ | `false` |
| hide-quota-text | Whether to hide quota text | _boolean_ | `false` |
| hide-selected-text | Whether to hide selected text | _boolean_ | `false` |
| stock-threshold | stock threshold | _boolean_ | `50` |
| show-add-cart-btn | Whether to show cart button | _boolean_ | `true` |
| buy-text | Buy button text | _string_ | - | - |
| add-cart-text | Add cart button text | _string_ | - | - |
| quota | Quota (0 as no limit) | _number_ | `0` |
| quota-used | Used quota | _number_ | `0` |
| reset-stepper-on-hide | Whether to reset stepper when hide | _boolean_ | `false` |
| reset-selected-sku-on-hide | Whether to reset selected sku when hide | _boolean_ | `false` |
| disable-stepper-input | Whether to disable stepper input | _boolean_ | `false` |
| close-on-click-overlay | Whether to close sku popup when overlay is clicked | _boolean_ | `true` |
| stepper-title | Quantity title | _string_ | `Quantity` |
| custom-stepper-config | Custom stepper related config | _object_ | `{}` |
| message-config | Message related config | _object_ | `{}` |
| disable-soldout-sku `v2.11.3` | Whether to disable soldout sku | _boolean_ | `true` |
| get-container | Return the mount node for sku | _string \| () => Element_ | - |
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` |
| start-sale-num | Minimum quantity | _number_ | `1` |
| properties | Goods properties | _array_ | - |
| preview-on-click-image `v2.5.2` | Whether to preview image when click goods image | _boolean_ | `true` |
| show-header-image `v2.9.0` | Whether to display header image | _boolean_ | `true` |
| lazy-load | Whether to enable lazy load,should register [Lazyload](#/en-US/lazyload) component | _boolean_ | `false` |
### Events
| Event | Description | Arguments |
| --- | --- | --- |
| add-cart | Emitted when click cart button | data: object |
| buy-clicked | Emitted when click buy button | data: object |
| stepper-change | Emitted when stepper value changed | value: number |
| sku-selected | Emitted when select sku | { skuValue, selectedSku, selectedSkuComb } |
| sku-prop-selected | Emitted when select property | { propValue, selectedProp, selectedSkuComb } |
| open-preview | Emitted when open image preview | data: object |
| close-preview | Emitted when close image preview | data: object |
| sku-reset `v2.8.1` | Emitted when reset sku and property | { selectedSku, selectedProp, selectedSkuComb } |
### Methods
Use [ref](https://vuejs.org/v2/api/#ref) to get Sku instance and call instance methods.
| Name | Description | Attribute | Return value |
| --- | --- | --- | --- |
| getSkuData | Get current skuData | - | skuData |
| resetSelectedSku | Reset selected sku to initial sku | - | - |
### Slots
| Name | Description |
| ------------------------------- | --------------------------------- |
| sku-header | Custom header |
| sku-header-price | Custom header price area |
| sku-header-origin-price | Custom header origin price area |
| sku-header-extra | Extra header area |
| sku-header-image-extra `v2.5.2` | Custom header image extra area |
| sku-body-top | Custom content before sku-group |
| sku-group | Custom sku |
| extra-sku-group | Extra custom content |
| sku-stepper | Custom stepper |
| sku-messages | Custom messages |
| sku-actions-top | Custom content before sku-actions |
| sku-actions | Custom button actions |
### Sku Data Structure
```js
sku: {
tree: [
{
k: 'Color',
k_s: 's1',
v: [
{
id: '1',
name: 'Red',
imgUrl: 'https://img01.yzcdn.cn/1.jpg',
previewImgUrl: 'https://img01.yzcdn.cn/1p.jpg',
},
{
id: '1',
name: 'Blue',
imgUrl: 'https://img01.yzcdn.cn/2.jpg',
previewImgUrl: 'https://img01.yzcdn.cn/2p.jpg',
}
],
largeImageMode: true, // whether to enable large image mode
}
],
list: [
{
id: 2259,
s1: '1',
s2: '1',
price: 100,
stock_num: 110
}
],
price: '1.00',
stock_num: 227,
collection_id: 2261,
none_sku: false,
messages: [
{
datetime: '0',
multiple: '0',
name: 'Message',
type: 'text',
required: '1',
placeholder: '',
extraDesc: ''
}
],
hide_stock: false,
properties: [
{
k_id: 123,
k: 'More',
is_multiple: true,
v: [
{
id: 1222,
name: 'Tea',
price: 1,
},
{
id: 1223,
name: 'Water',
price: 1,
}
],
}
]
}
```
### properties Data Structure
```js
[
{
k_id: 123,
k: 'More',
is_multiple: true,
v: [
{
id: 1222,
name: 'Tea',
price: 1,
text_status: 0,
},
{
id: 1223,
name: 'Water',
price: 1,
text_status: 1,
},
],
},
];
```
### initialSku Data Structure
```js
{
// Key:skuKeyStr
// Value:skuValueId
s1: '30349',
s2: '1193',
selectedNum: 3,
selectedProp: {
123: [1222]
}
}
```
### Goods Data Structure
```js
goods: {
picture: 'https://img01.yzcdn.cn/1.jpg';
}
```
### customStepperConfig Data Structure
``
没有合适的资源?快使用搜索试试~ 我知道了~
Vant移动端组件库 v2.13.0.zip
共1052个文件
js:294个
md:181个
ts:152个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 46 浏览量
2023-10-03
22:03:18
上传
评论
收藏 22.13MB ZIP 举报
温馨提示
Vant移动端组件库 v2.13.0.zip
资源推荐
资源详情
资源评论
收起资源包目录
Vant移动端组件库 v2.13.0.zip (1052个子文件)
.editorconfig 214B
.eslintignore 25B
.gitignore 150B
.gitignore 44B
changelog-commit.hbs 325B
changelog-main.hbs 149B
changelog-header.hbs 92B
index.html 2KB
index.html 1KB
area.js 103KB
Sku.js 21KB
vant.config.js 20KB
index.js 14KB
index.js 12KB
index.spec.js 12KB
date-picker.spec.js 11KB
index.js 11KB
index.spec.js 10KB
index.js 10KB
index.spec.js 10KB
props.spec.js 10KB
index.spec.js 10KB
index.js 10KB
index.js 9KB
index.spec.js 9KB
PickerColumn.js 9KB
index.js 9KB
index.spec.js 9KB
index.spec.js 8KB
DatePicker.js 8KB
index.spec.js 8KB
index.js 8KB
Month.js 8KB
index.js 7KB
index.js 7KB
index.spec.js 7KB
Dialog.js 6KB
index.js 6KB
ImagePreviewItem.js 6KB
index.spec.js 6KB
index.spec.js 6KB
index.spec.js 6KB
index.js 6KB
index.js 6KB
index.js 5KB
prop.spec.js 5KB
SkuMessages.js 5KB
index.js 5KB
index.js 5KB
index.spec.js 5KB
time-picker.spec.js 5KB
field-type.spec.js 5KB
codepoints.js 5KB
index.spec.js 5KB
ImagePreview.js 5KB
index.js 5KB
index.js 5KB
index.spec.js 5KB
index.spec.js 5KB
index.js 5KB
index.js 5KB
index.spec.js 5KB
index.spec.js 5KB
index.js 5KB
SkuStepper.js 4KB
index.spec.js 4KB
index.spec.js 4KB
methods.spec.js 4KB
index.js 4KB
index.spec.js 4KB
index.spec.js 4KB
cascade.spec.js 4KB
index.js 4KB
index.js 4KB
index.spec.js 4KB
config.js 4KB
sku-helper.js 4KB
index.js 4KB
index.js 4KB
index.js 4KB
index.spec.js 4KB
index.js 4KB
index.spec.js 4KB
index.js 4KB
index.spec.js 4KB
index.js 4KB
index.spec.js 4KB
directive.js 3KB
index.spec.js 3KB
index.spec.js 3KB
index.js 3KB
index.js 3KB
index.js 3KB
index.spec.js 3KB
index.spec.js 3KB
checkbox.js 3KB
index.js 3KB
TimePicker.js 3KB
index.spec.js 3KB
entry.js 3KB
共 1052 条
- 1
- 2
- 3
- 4
- 5
- 6
- 11
资源评论
码云笔记
- 粉丝: 2w+
- 资源: 5837
下载权益
C知道特权
VIP文章
课程特权
开通VIP
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- pta题库答案c语言之排序4统计工龄.zip
- pta题库答案c语言之树结构7堆中的路径.zip
- pta题库答案c语言之树结构3TreeTraversalsAgain.zip
- pta题库答案c语言之树结构2ListLeaves.zip
- pta题库答案c语言之树结构1树的同构.zip
- 基于C++实现民航飞行与地图简易管理系统可执行程序+说明+详细注释.zip
- pta题库答案c语言之复杂度1最大子列和问题.zip
- 三维装箱问题(Three-Dimensional Bin Packing Problem,3D-BPP)是一个经典的组合优化问题
- 以下是一些关于Linux线程同步的基本概念和方法.txt
- 以下是一个简化的示例,它使用pygame库来模拟烟花动画的框架.txt
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功