[new feature] sku组件增加步进器相关自定义配置 (#600)

This commit is contained in:
wny
2018-02-01 21:43:36 +08:00
committed by GitHub
parent 1b85c09a75
commit 4270354a67
8 changed files with 214 additions and 3 deletions
+44
View File
@@ -27,6 +27,23 @@ Vue.use(Sku);
/>
```
#### Custom Stepper Config
```html
<van-sku
v-model="showBase"
: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"
/>
```
#### Advanced Usage
```html
@@ -72,6 +89,7 @@ Vue.use(Sku);
| reset-selected-sku-on-hide | Whether to reset selected sku when hide | `Boolean` | `false` | - |
| disable-stepper-input | Whether to disable stepper input | `Boolean` | `false` | - |
| stepper-title | Quantity title | `String` | `Quantity` | - |
| custom-stepper-config | Custom stepper related config | `Object` | `{}` | - |
### Event
@@ -156,6 +174,32 @@ goods: {
}
```
#### customStepperConfig Data Structure
```javascript
customStepperConfig: {
// custom quota text
quotaText: 'only 5 can buy',
// custom callback when over limit
handleOverLimit: (data) => {
const { action, limitType, quota, quotaUsed } = data;
if (action === 'minus') {
Toast('at least select one');
} else if (action === 'plus') {
// const { LIMIT_TYPE } = Sku.skuConstants;
if (limitType === LIMIT_TYPE.QUOTA_LIMIT) {
let msg = `Buy up to ${quota}`;
if (quotaUsed > 0) msg += `you already buy ${quotaUsed}`;
Toast(msg);
} else {
Toast('not enough stock');
}
}
}
}
```
#### Event Params Data Structure
```javascript
+43
View File
@@ -27,6 +27,23 @@ Vue.use(Sku);
/>
```
#### 自定义步进器相关配置
```html
<van-sku
v-model="showBase"
: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"
/>
```
#### 高级用法
```html
@@ -73,6 +90,7 @@ Vue.use(Sku);
| reset-selected-sku-on-hide | 窗口隐藏时重置已选择的sku | `Boolean` | `false` | - |
| disable-stepper-input | 是否禁用sku中stepper的input框 | `Boolean` | `false` | - |
| stepper-title | 数量选择组件左侧文案 | `String` | `购买数量` | - |
| custom-stepper-config | 步进器相关自定义配置 | `Object` | `{}` | - |
### Event
@@ -163,6 +181,31 @@ goods: {
}
```
#### customStepperConfig 对象结构
```javascript
customStepperConfig: {
// 自定义限购文案
quotaText: '每次限购xxx件',
// 自定义步进器超过限制时的回调
handleOverLimit: (data) => {
const { action, limitType, quota, quotaUsed } = data;
if (action === 'minus') {
Toast('至少选择一件商品');
} 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('库存不够了~~');
}
}
}
}
```
#### 添加购物车和点击购买回调函数接收的 skuData 对象结构
```javascript
skuData: {