blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

docs(Sku): improve document

Browse Source
This commit is contained in:
chenjiahan 2020-06-23 11:42:39 +08:00
parent 0d7dc8eb3c
commit 3350120cba
4 changed files with 53 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/sku/README.md
View File

@ -62,7 +62,7 @@ export default {
/>
```
### Advanced Usage
### Custom By Slot
```html
<van-sku
@ -140,7 +140,7 @@ export default {
| start-sale-num `v2.3.0` | Minimum quantity | _number_ | `1` |
| properties `v2.4.2` | Goods properties | _array_ | - |
| preview-on-click-image `v2.5.2` | Whether to preview image when click goods image | _boolean_ | `true` |
| showHeaderImage `v2.9.0` | Whether to display sku header 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

8
src/sku/README.zh-CN.md
View File

@ -64,7 +64,7 @@ export default {
/>
```
### 高级用法
### 通过插槽定制
```html
<van-sku
@ -116,7 +116,7 @@ export default {
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| v-model | 是否显示 sku | _boolean_ | `false` |
| v-model | 是否显示商品规格弹窗 | _boolean_ | `false` |
| sku | 商品 sku 数据 | _object_ | - |
| goods | 商品信息 | _object_ | - |
| goods-id | 商品 id | _number \| string_ | - |
@ -144,8 +144,8 @@ export default {
| start-sale-num `v2.3.0` | 起售数量 | _number_ | `1` |
| properties `v2.4.2` | 商品属性 | _array_ | - |
| preview-on-click-image `v2.5.2` | 是否在点击商品图片时自动预览 | _boolean_ | `true` |
| showHeaderImage `v2.9.0` | 是否展示 sku 头部图片 | _boolean_ | `true` |
| lazy-load | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | _boolean_ | `false` |
| show-header-image `v2.9.0` | 是否展示头部图片 | _boolean_ | `true` |
| lazy-load `v2.9.0` | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | _boolean_ | `false` |
### Events

88
src/sku/demo/index.vue
View File

@ -82,7 +82,42 @@
</div>
</demo-block>
<demo-block :title="t('advancedUsage')">
<!-- 大图模式 -->
<demo-block :title="t('largePicturePreview')">
<div class="sku-container">
<van-sku
v-model="showLargePicturePreview"
:sku="skuData.sku"
:goods="skuData.goods_info"
:goods-id="skuData.goods_id"
:hide-stock="skuData.sku.hide_stock"
:quota="skuData.quota"
:quota-used="skuData.quota_used"
:start-sale-num="skuData.start_sale_num"
:close-on-click-overlay="closeOnClickOverlay"
:message-config="messageConfig"
:custom-sku-validator="customSkuValidator"
:properties="skuData.properties"
:show-header-image="false"
disable-stepper-input
reset-stepper-on-hide
safe-area-inset-bottom
reset-selected-sku-on-hide
@buy-clicked="onBuyClicked"
@add-cart="onAddCartClicked"
>
</van-sku>
<van-button
block
type="primary"
@click="showLargePicturePreview = true"
>
{{ t('largePicturePreview') }}
</van-button>
</div>
</demo-block>
<demo-block :title="t('customBySlot')">
<div class="sku-container">
<van-sku
v-model="showCustom"
@ -136,42 +171,7 @@
</template>
</van-sku>
<van-button block type="primary" @click="showCustom = true">
{{ t('advancedUsage') }}
</van-button>
</div>
</demo-block>
<!-- 大图模式 -->
<demo-block :title="t('largePreview')">
<div class="sku-container">
<van-sku
v-model="showLargePicturePreview"
:sku="skuData.sku"
:goods="skuData.goods_info"
:goods-id="skuData.goods_id"
:hide-stock="skuData.sku.hide_stock"
:quota="skuData.quota"
:quota-used="skuData.quota_used"
:start-sale-num="skuData.start_sale_num"
:close-on-click-overlay="closeOnClickOverlay"
:message-config="messageConfig"
:custom-sku-validator="customSkuValidator"
:properties="skuData.properties"
:show-header-image="false"
disable-stepper-input
reset-stepper-on-hide
safe-area-inset-bottom
reset-selected-sku-on-hide
@buy-clicked="onBuyClicked"
@add-cart="onAddCartClicked"
>
</van-sku>
<van-button
block
type="primary"
@click="showLargePicturePreview = true"
>
{{ t('largePreview') }}
{{ t('customBySlot') }}
</van-button>
</div>
</demo-block>
@ -186,21 +186,23 @@ export default {
i18n: {
'zh-CN': {
title2: '自定义步进器',
hideSoldoutSku: '隐藏售罄规格',
stepperTitle: '我要买',
button1: '积分兑换',
button2: '买买买',
actionsTop: '商品不多，赶快购买吧',
largePreview: 'sku大图模式',
stepperTitle: '我要买',
customBySlot: '通过插槽定制',
hideSoldoutSku: '隐藏售罄规格',
largePicturePreview: '大图预览模式',
},
'en-US': {
title2: 'Custom Stepper Related Config',
hideSoldoutSku: 'Hide Soldout Sku',
stepperTitle: 'Stepper title',
button1: 'Button',
button2: 'Button',
actionsTop: 'Action top info',
largePreview: 'sku big picture mode',
customBySlot: 'Custom By Slot',
stepperTitle: 'Stepper title',
hideSoldoutSku: 'Hide Soldout Sku',
largePicturePreview: 'Large Picture Preview',
},
},

4
src/sku/test/__snapshots__/demo.spec.js.snap
View File

@ -30,7 +30,7 @@ exports[`renders demo correctly 1`] = `
<div class="sku-container">
<!----> <button class="van-button van-button--primary van-button--normal van-button--block">
<div class="van-button__content"><span class="van-button__text">
高级用法
大图预览模式
</span></div>
</button></div>
</div>
@ -38,7 +38,7 @@ exports[`renders demo correctly 1`] = `
<div class="sku-container">
<!----> <button class="van-button van-button--primary van-button--normal van-button--block">
<div class="van-button__content"><span class="van-button__text">
sku大图模式
通过插槽定制
</span></div>
</button></div>
</div>