[Improvement] Sku: add getSkuData method (#585)

docs/demos/views/sku.vue

@@ -13,8 +13,8 @@
           :reset-stepper-on-hide="true"
           :reset-selected-sku-on-hide="true"
           :disable-stepper-input="true"
-          @buy-clicked="handleBuyClicked"
-          @add-cart="handleAddCartClicked"
+          @buy-clicked="onBuyClicked"
+          @add-cart="onAddCartClicked"
         />
         <van-button type="primary" @click="showBase = true" block>{{ $t('basicUsage') }}</van-button>
       </div>
@@ -23,7 +23,7 @@
     <demo-block :title="$t('advancedUsage')">
       <div class="sku-container">
         <van-sku
-          v-model="showCustomAction"
+          v-model="showCustom"
           :stepper-title="$t('stepperTitle')"
           :sku="$t('sku').sku"
           :goods="$t('sku').goods_info"
@@ -34,18 +34,17 @@
           :quota-used="$t('sku').quota_used"
           :reset-stepper-on-hide="true"
           :initial-sku="initialSku"
-          @buy-clicked="handleBuyClicked"
-          @add-cart="handleAddCartClicked"
+          @buy-clicked="onBuyClicked"
+          @add-cart="onAddCartClicked"
         >
-          <template slot="sku-messages" />
           <template slot="sku-actions" slot-scope="props">
             <div class="van-sku-actions">
-              <van-button bottom-action @click="handlePointClicked">{{ $t('button1') }}</van-button>
+              <van-button bottom-action @click="onPointClicked">{{ $t('button1') }}</van-button>
               <van-button type="primary" bottom-action @click="props.skuEventBus.$emit('sku:buy')">{{ $t('button2') }}</van-button>
             </div>
           </template>
         </van-sku>
-        <van-button type="primary" @click="showCustomAction = true" block>{{ $t('advancedUsage') }}</van-button>
+        <van-button type="primary" @click="showCustom = true" block>{{ $t('advancedUsage') }}</van-button>
       </div>
     </demo-block>
   </demo-section>
@@ -73,7 +72,7 @@ export default {
   data() {
     return {
       showBase: false,
-      showCustomAction: false,
+      showCustom: false,
       initialSku: {
         s1: '30349',
         s2: '1193'
@@ -82,13 +81,15 @@ export default {
   },
 
   methods: {
-    handleBuyClicked(data) {
+    onBuyClicked(data) {
       Toast(JSON.stringify(data));
     },
-    handleAddCartClicked(data) {
+
+    onAddCartClicked(data) {
       Toast(JSON.stringify(data));
     },
-    handlePointClicked() {
+
+    onPointClicked() {
       Toast('积分兑换');
     }
   }

docs/markdown/en-US/sku.md

@@ -22,8 +22,8 @@ Vue.use(Sku);
   :reset-stepper-on-hide="resetStepperOnHide"
   :reset-selected-sku-on-hide="resetSelectedSkuOnHide"
   :disable-stepper-input="disableStepperInput"
-  @buy-clicked="handleBuyClicked"
-  @add-cart="handleAddCartClicked"
+  @buy-clicked="onBuyClicked"
+  @add-cart="onAddCartClicked"
 />
 ```
 
@@ -42,15 +42,13 @@ Vue.use(Sku);
   :quota-used="quotaUsed"
   :reset-stepper-on-hide="true"
   :initial-sku="initialSku"
-  @buy-clicked="handleBuyClicked"
-  @add-cart="handleAddCartClicked"
+  @buy-clicked="onBuyClicked"
+  @add-cart="onAddCartClicked"
 >
-  <!-- hide sku messages -->
-  <template slot="sku-messages"></template>
   <!-- custom sku actions -->
   <template slot="sku-actions" slot-scope="props">
     <div class="van-sku-actions">
-      <van-button bottom-action @click="handlePointClicked">Button</van-button>
+      <van-button bottom-action @click="onPointClicked">Button</van-button>
       <!-- trigger sku inner event -->
       <van-button type="primary" bottom-action @click="props.skuEventBus.$emit('sku:buy')">Button</van-button>
     </div>
@@ -82,6 +80,12 @@ Vue.use(Sku);
 | add-cart | Triggered when click cart button | data: Object |
 | buy-clicked | Triggered when click buy button | data: Object |
 
+### Methods
+
+| Method | Description |
+|-----------|-----------|
+| getSkuData() | Get current sku data |
+
 ### Slot
 
 | Name | Description | 

docs/markdown/zh-CN/sku.md

@@ -22,8 +22,8 @@ Vue.use(Sku);
   :reset-stepper-on-hide="resetStepperOnHide"
   :reset-selected-sku-on-hide="resetSelectedSkuOnHide"
   :disable-stepper-input="disableStepperInput"
-  @buy-clicked="handleBuyClicked"
-  @add-cart="handleAddCartClicked"
+  @buy-clicked="onBuyClicked"
+  @add-cart="onAddCartClicked"
 />
 ```
 
@@ -42,16 +42,14 @@ Vue.use(Sku);
   :quota-used="quotaUsed"
   :reset-stepper-on-hide="true"
   :initial-sku="initialSku"
-  @buy-clicked="handleBuyClicked"
-  @add-cart="handleAddCartClicked"
+  @buy-clicked="onBuyClicked"
+  @add-cart="onAddCartClicked"
 >
-  <!-- 隐藏 sku messages -->
-  <template slot="sku-messages"></template>
   <!-- 自定义 sku actions -->
   <template slot="sku-actions" slot-scope="props">
     <div class="van-sku-actions">
-      <van-button bottom-action @click="handlePointClicked">积分兑换</van-button>
-      <!-- 直接触发 sku 内部事件，通过内部事件执行 handleBuyClicked 回调 -->
+      <van-button bottom-action @click="onPointClicked">积分兑换</van-button>
+      <!-- 直接触发 sku 内部事件，通过内部事件执行 onBuyClicked 回调 -->
       <van-button type="primary" bottom-action @click="props.skuEventBus.$emit('sku:buy')">买买买</van-button>
     </div>
   </template>
@@ -83,6 +81,11 @@ Vue.use(Sku);
 | add-cart | 点击添加购物车回调 | skuData: Object |
 | buy-clicked | 点击购买回调 | skuData: Object |
 
+### 方法
+
+| 函数 | 说明 |
+|-----------|-----------|
+| getSkuData() | 获取当前 skuData |
 
 ### Slot
 Sku 组件默认划分好了若干区块，这些区块都定义成了 slot，可以按需进行替换。区块顺序见下表：

packages/sku/Sku.vue

@@ -251,12 +251,12 @@ export default create({
     const skuEventBus = new Vue();
     this.skuEventBus = skuEventBus;
 
-    skuEventBus.$on('sku:close', this.handleCloseClicked);
-    skuEventBus.$on('sku:select', this.handleSkuSelected);
-    skuEventBus.$on('sku:numChange', this.handleNumChange);
-    skuEventBus.$on('sku:overLimit', this.handleOverLimit);
-    skuEventBus.$on('sku:addCart', this.handleAddCartClicked);
-    skuEventBus.$on('sku:buy', this.handleBuyClicked);
+    skuEventBus.$on('sku:close', this.onCloseClicked);
+    skuEventBus.$on('sku:select', this.onSkuSelected);
+    skuEventBus.$on('sku:numChange', this.onNumChange);
+    skuEventBus.$on('sku:overLimit', this.onOverLimit);
+    skuEventBus.$on('sku:addCart', this.onAddCartClicked);
+    skuEventBus.$on('sku:buy', this.onBuyClicked);
 
     this.resetSelectedSku(this.skuTree);
     // 组件初始化后的钩子，抛出skuEventBus
@@ -306,11 +306,11 @@ export default create({
       }
     },
 
-    handleCloseClicked() {
+    onCloseClicked() {
       this.show = false;
     },
 
-    handleSkuSelected(skuValue) {
+    onSkuSelected(skuValue) {
       // 点击已选中的sku时则取消选中
       this.selectedSku =
         this.selectedSku[skuValue.skuKeyStr] === skuValue.id
@@ -324,11 +324,11 @@ export default create({
       });
     },
 
-    handleNumChange(num) {
+    onNumChange(num) {
       this.selectedNum = num;
     },
 
-    handleOverLimit({ action, limitType, quota, quotaUsed }) {
+    onOverLimit({ action, limitType, quota, quotaUsed }) {
       if (action === 'minus') {
         Toast(this.$t('least'));
       } else if (action === 'plus') {
@@ -342,27 +342,31 @@ export default create({
       }
     },
 
-    handleAddCartClicked() {
-      this.handleBuyOrAddCart('add-cart');
+    onAddCartClicked() {
+      this.onBuyOrAddCart('add-cart');
     },
 
-    handleBuyClicked() {
-      this.handleBuyOrAddCart('buy-clicked');
+    onBuyClicked() {
+      this.onBuyOrAddCart('buy-clicked');
     },
 
-    handleBuyOrAddCart(type) {
+    onBuyOrAddCart(type) {
       const error = this.validateSku();
       if (error) {
         Toast(error);
-        return;
+      } else {
+        this.$emit(type, this.getSkuData());
       }
-      this.$emit(type, {
+    },
+
+    getSkuData() {
+      return {
         goodsId: this.goodsId,
         selectedNum: this.selectedNum,
         selectedSkuComb: this.selectedSkuComb,
         messages: this.getSkuMessages(),
         cartMessages: this.getSkuCartMessages()
-      });
+      };
     }
   }
 });