fix: quantity -> stepper

docs/examples-docs/sku.md

@@ -60,7 +60,7 @@ Vue.component(Sku.name, Sku);
       :show-add-cart-btn="true"
       :quota="quota"
       :quota-used="quotaUsed"
-      :reset-quantity-on-hide="true"
+      :reset-stepper-on-hide="true"
       @buy-clicked="handleBuyClicked"
       @add-cart="handleAddCartClicked"
     >
@@ -85,7 +85,7 @@ Vue.component(Sku.name, Sku);
       :show-add-cart-btn="true"
       :quota="quota"
       :quota-used="quotaUsed"
-      :reset-quantity-on-hide="true"
+      :reset-stepper-on-hide="true"
       @buy-clicked="handleBuyClicked"
       @add-cart="handleAddCartClicked"
     >

packages/sku/components/SkuQuantity.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="van-sku-quantity-stock">
+  <div class="van-sku-stepper-stock">
-    <div class="van-sku-quantity-container">
+    <div class="van-sku-stepper-container">
-      <div class="van-sku__quantity-title">{{ quantityTitle }}：</div>
+      <div class="van-sku__stepper-title">{{ stepperTitle }}：</div>
-      <van-quantity v-model="currentNum" :min="1" :max="quantityLimit" class="van-sku__quantity" @overlimit="handleOverLimit"></van-quantity>
+      <van-stepper v-model="currentNum" :min="1" :max="stepperLimit" class="van-sku__stepper" @overlimit="handleOverLimit"></van-stepper>
     </div>
     <div v-if="!hideStock" class="van-sku__stock">剩余{{ stock }}件</div>
     <div v-if="quota > 0" class="van-sku__quota">每人限购{{ quota }}件</div>
@@ -10,16 +10,16 @@
 </template>
 
 <script>
-import Quantity from 'packages/quantity';
+import Stepper from 'packages/stepper';
 import { LIMIT_TYPE } from '../constants';
 
 const { QUOTA_LIMIT, STOCK_LIMIT } = LIMIT_TYPE;
 
 export default {
-  name: 'van-sku-quantity',
+  name: 'van-sku-stepper',
 
   components: {
-    [Quantity.name]: Quantity
+    [Stepper.name]: Stepper
   },
 
   props: {
@@ -34,7 +34,7 @@ export default {
       type: Boolean,
       default: false
     },
-    quantityTitle: {
+    stepperTitle: {
       type: String,
       default: '购买数量'
     }
@@ -52,7 +52,7 @@ export default {
     currentNum(num) {
       this.skuEventBus.$emit('sku:numChange', num);
     },
-    quantityLimit(limit) {
+    stepperLimit(limit) {
       if (limit < this.currentNum) {
         this.currentNum = limit;
       }
@@ -66,7 +66,7 @@ export default {
       }
       return this.sku.stock_num;
     },
-    quantityLimit() {
+    stepperLimit() {
       const quotaLimit = this.quota - this.quotaUsed;
       let limit;
 

packages/sku/containers/SkuContainer.vue

@@ -28,19 +28,19 @@
             </div>
           </slot>
           <slot name="extra-sku-group" :skuEventBus="skuEventBus"></slot>
-          <slot name="sku-quantity" :skuEventBus="skuEventBus" :selectedSku="selectedSku" :selectedSkuComb="selectedSkuComb" :selectedNum="selectedNum">
+          <slot name="sku-stepper" :skuEventBus="skuEventBus" :selectedSku="selectedSku" :selectedSkuComb="selectedSkuComb" :selectedNum="selectedNum">
-            <van-sku-quantity
+            <van-sku-stepper
-              ref="skuQuantity"
+              ref="skuStepper"
               :skuEventBus="skuEventBus"
               :selectedSku="selectedSku"
               :selectedSkuComb="selectedSkuComb"
               :selectedNum="selectedNum"
-              :quantityTitle="quantityTitle"
+              :stepperTitle="stepperTitle"
               :sku="sku"
               :quota="quota"
               :quotaUsed="quotaUsed"
               :hideStock="hideStock">
-            </van-sku-quantity>
+            </van-sku-stepper>
           </slot>
          <slot name="sku-messages">
             <van-sku-messages
@@ -67,7 +67,7 @@ import Popup from 'packages/popup';
 import Toast from 'packages/toast';
 import SkuHeader from '../components/SkuHeader';
 import SkuRow from '../components/SkuRow';
-import SkuQuantity from '../components/SkuQuantity';
+import SkuStepper from '../components/SkuStepper';
 import SkuMessages from '../components/SkuMessages';
 import SkuActions from '../components/SkuActions';
 import { isAllSelected, getSkuComb, getSelectedSkuValues } from '../utils/skuHelper';
@@ -82,7 +82,7 @@ export default {
     [Popup.name]: Popup,
     [SkuHeader.name]: SkuHeader,
     [SkuRow.name]: SkuRow,
-    [SkuQuantity.name]: SkuQuantity,
+    [SkuStepper.name]: SkuStepper,
     [SkuMessages.name]: SkuMessages,
     [SkuActions.name]: SkuActions
   },
@@ -113,7 +113,7 @@ export default {
       default: true
     },
     buyText: String,
-    quantityTitle: {
+    stepperTitle: {
       type: String,
       default: '购买数量'
     },
@@ -121,7 +121,7 @@ export default {
       type: Number,
       default: 150
     },
-    resetQuantityOnHide: Boolean,
+    resetStepperOnHide: Boolean,
     value: Boolean
   },
 
@@ -145,8 +145,8 @@ export default {
           selectedSkuComb: this.selectedSkuComb
         });
 
-        if (this.resetQuantityOnHide) {
+        if (this.resetStepperOnHide) {
-          this.$refs.skuQuantity && this.$refs.skuQuantity.setCurrentNum(1);
+          this.$refs.skuStepper && this.$refs.skuStepper.setCurrentNum(1);
         }
       }
     },

packages/sku/index.js

@@ -1,7 +1,7 @@
 import SkuActions from './components/SkuActions';
 import SkuHeader from './components/SkuHeader';
 import SkuMessages from './components/SkuMessages';
-import SkuQuantity from './components/SkuQuantity';
+import SkuStepper from './components/SkuStepper';
 import SkuRow from './components/SkuRow';
 import SkuRowItem from './components/SkuRowItem';
 import skuHelper from './utils/skuHelper';
@@ -10,7 +10,7 @@ import SkuContainer from './containers/SkuContainer';
 SkuContainer.SkuActions = SkuActions;
 SkuContainer.SkuHeader = SkuHeader;
 SkuContainer.SkuMessages = SkuMessages;
-SkuContainer.SkuQuantity = SkuQuantity;
+SkuContainer.SkuStepper = SkuStepper;
 SkuContainer.SkuRow = SkuRow;
 SkuContainer.SkuRowItem = SkuRowItem;
 SkuContainer.skuHelper = skuHelper;

packages/vant-css/src/sku.css

@@ -135,22 +135,22 @@
 }
 
 /*
-  sku quantity
+  sku stepper
 */
-.van-sku-quantity-stock {
+.van-sku-stepper-stock {
   padding: 12px 0;
   margin-left: 15px;
 }
-.van-sku-quantity-container {
+.van-sku-stepper-container {
   height: 30px;
   margin-right: 20px;
 }
-.van-sku__quantity-title {
+.van-sku__stepper-title {
   float: left;
   line-height: 30px;
   font-size: 14px;
 }
-.van-sku__quantity {
+.van-sku__stepper {
   float: right;
   top: 7px;
   left: 4px;