docs(Sku): improve document

src/sku/README.md

@@ -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

src/sku/README.zh-CN.md

@@ -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` |
+| show-header-image `v2.9.0` | 是否展示头部图片 | _boolean_ | `true` |
-| lazy-load | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | _boolean_ | `false` |
+| lazy-load `v2.9.0` | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | _boolean_ | `false` |
 
 ### Events
 

src/sku/demo/index.vue

@@ -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') }}
+          {{ t('customBySlot') }}
-        </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') }}
         </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',
     },
   },
 

src/sku/test/__snapshots__/demo.spec.js.snap

@@ -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>