[new feature] sku组件增加图片上传功能 (#612)

* [new feature] sku组件增加图片上传功能
This commit is contained in:
wny
2018-02-07 11:29:07 +08:00
committed by GitHub
parent 30e42284e9
commit 7b89e11701
11 changed files with 361 additions and 41 deletions

View File

@@ -22,6 +22,7 @@ Vue.use(Sku);
:reset-stepper-on-hide="resetStepperOnHide"
:reset-selected-sku-on-hide="resetSelectedSkuOnHide"
:disable-stepper-input="disableStepperInput"
:message-config="messageConfig"
@buy-clicked="onBuyClicked"
@add-cart="onAddCartClicked"
/>
@@ -90,6 +91,7 @@ Vue.use(Sku);
| disable-stepper-input | Whether to disable stepper input | `Boolean` | `false` | - |
| stepper-title | Quantity title | `String` | `Quantity` | - |
| custom-stepper-config | Custom stepper related config | `Object` | `{}` | - |
| message-config | Message related config | `Object` | `{}` | - |
| get-container | Return the mount node for sku | `Function` | - | `() => HTMLElement` |
### Event
@@ -201,6 +203,26 @@ customStepperConfig: {
}
```
#### messageConfig Data Structure
```javascript
messageConfig: {
// the upload image callback
uploadImg: () => {
return new Promise((resolve) => {
setTimeout(() => resolve('https://img.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg'), 1000);
});
},
// max file size (MB)
uploadMaxSize: 3,
// placehold config
placeholderMap: {
text: 'xxx',
tel: 'xxx',
...
}
}
```
#### Event Params Data Structure
```javascript

View File

@@ -22,6 +22,7 @@ Vue.use(Sku);
:reset-stepper-on-hide="resetStepperOnHide"
:reset-selected-sku-on-hide="resetSelectedSkuOnHide"
:disable-stepper-input="disableStepperInput"
:message-config="messageConfig"
@buy-clicked="onBuyClicked"
@add-cart="onAddCartClicked"
/>
@@ -91,6 +92,7 @@ Vue.use(Sku);
| disable-stepper-input | 是否禁用sku中stepper的input框 | `Boolean` | `false` | - |
| stepper-title | 数量选择组件左侧文案 | `String` | `购买数量` | - |
| custom-stepper-config | 步进器相关自定义配置 | `Object` | `{}` | - |
| message-config | 留言相关配置 | `Object` | `{}` | - |
| get-container | 指定挂载的 HTML 节点 | `Function` | - | `() => HTMLElement` |
### Event
@@ -207,6 +209,26 @@ customStepperConfig: {
}
```
#### messageConfig Data Structure
```javascript
messageConfig: {
// 图片上传回调需要返回一个promisepromise正确执行的结果需要是一个图片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,
// placehold配置
placeholderMap: {
text: 'xxx',
tel: 'xxx',
...
}
}
```
#### 添加购物车和点击购买回调函数接收的 skuData 对象结构
```javascript
skuData: {