增加单独禁用stepper input功能 (#146)

* fix: sku message key

* fix: 改用goods_id当key

* fix: 漏改一处

* feat: 增加单独禁用stepper input功能

* fix: update doc

* fix: rename spec file

docs/examples-docs/sku.md

@@ -16,6 +16,8 @@ export default {
       goodsId: data.goods_id,
       quota: data.quota,
       quotaUsed: data.quota_used,
+      disableStepperInput: true,
+      resetStepperOnHide: true,
       initialSku: {
         s1: '30349',
         s2: '1193'
@@ -62,10 +64,10 @@ Vue.component(Sku.name, Sku);
       :goods="goods"
       :goods-id="goodsId"
       :hide-stock="sku.hide_stock"
-      :show-add-cart-btn="true"
       :quota="quota"
       :quota-used="quotaUsed"
-      :reset-stepper-on-hide="true"
+      :reset-stepper-on-hide="resetStepperOnHide"
+      :disable-stepper-input="disableStepperInput"
       @buy-clicked="handleBuyClicked"
       @add-cart="handleAddCartClicked"
     >
@@ -130,6 +132,7 @@ Vue.component(Sku.name, Sku);
 | quota | 限购数(0表示不限购) | Number  | 0 |  否 |
 | quotaUsed | 已经购买过的数量 | Number  | 0 |  否 |
 | resetStepperOnHide | 窗口隐藏时重置选择的商品数量 | Boolean  | false |  否 |
+| disableStepperInput | 是否禁用sku中stepper的input框 | Boolean | false | 否 |
 | stepperTitle | 数量选择组件左侧文案 | String  | '购买数量' |  否 |
 | add-cart | 点击添加购物车回调 | Function(skuData: Object)  | - |  否 |
 | buy-clicked | 点击购买回调 | Function(skuData: Object)  | - |  否 |

docs/examples-docs/stepper.md

@@ -69,7 +69,8 @@ Vue.component(Stepper.name, Stepper);
 | max | 最大值 | `String | Number` | - | - |
 | defaultValue | 默认值 | `String | Number` | `1` | - |
 | step | 步数 | `String | Number` | `1` | - |
-| disabled | 是否禁用 | `Boolean` | `false` | - |
+| disabled | 是否禁用 | `Boolean` | `false` | - | 
+| disableInput | 是否禁用input框 | `Boolean` | `false` | - |
 
 ### Event
 

packages/sku/components/SkuStepper.vue

@@ -2,7 +2,14 @@
   <div class="van-sku-stepper-stock">
     <div class="van-sku-stepper-container">
       <div class="van-sku__stepper-title">{{ stepperTitle }}：</div>
-      <van-stepper v-model="currentNum" :min="1" :max="stepperLimit" class="van-sku__stepper" @overlimit="handleOverLimit"></van-stepper>
+      <van-stepper
+        class="van-sku__stepper"
+        v-model="currentNum"
+        :min="1"
+        :max="stepperLimit"
+        :disableInput="disableStepperInput"
+        @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>
@@ -34,6 +41,10 @@ export default {
       type: Boolean,
       default: false
     },
+    disableStepperInput: {
+      type: Boolean,
+      default: false
+    },
     stepperTitle: {
       type: String,
       default: DEFAULT_BUY_TEXT

packages/sku/containers/SkuContainer.vue

@@ -45,6 +45,7 @@
               :skuStockNum="sku.stock_num"
               :quota="quota"
               :quotaUsed="quotaUsed"
+              :disableStepperInput="disableStepperInput"
               :hideStock="hideStock">
             </van-sku-stepper>
           </slot>
@@ -133,6 +134,7 @@ export default {
       default: 200
     },
     resetStepperOnHide: Boolean,
+    disableStepperInput: Boolean,
     messagePlaceholderMap: {
       type: Object,
       default() {

packages/stepper/index.vue

@@ -8,11 +8,11 @@
       }">
     </button>
     <input
-      type="text"
+      type="number"
       class="van-stepper__input"
       :value="currentValue"
       @input="handleInputChange"
-      :disabled="disabled">
+      :disabled="disabled || disableInput">
     <button
       @click="handleChange('plus')"
       class="van-stepper__stepper van-stepper__plus"
@@ -42,6 +42,7 @@ export default {
       default: 1
     },
     disabled: Boolean,
+    disableInput: Boolean,
     defaultValue: {
       type: [String, Number],
       default: 1
@@ -91,8 +92,13 @@ export default {
   methods: {
     // 纠正value值
     correctValue(value) {
-      value = Math.max(this.min, value);
-      value = Math.min(this.max, value);
+      if (Number.isNaN(value)) {
+        value = this.min;
+      } else {
+        value = Math.max(this.min, value);
+        value = Math.min(this.max, value);
+      }
+
       return value;
     },
     handleInputChange(event) {

test/unit/specs/stepper.spec.js

@@ -60,6 +60,17 @@ describe('Stepper', () => {
     });
   });
 
+  it('only disable stepper input', () => {
+    wrapper = mount(Stepper, {
+      propsData: {
+        disableInput: true
+      }
+    });
+
+    const input = wrapper.find('.van-stepper__input')[0];
+    expect(input.hasAttribute('disabled', 'disabled')).to.be.true;
+  });
+
   it('update stepper value use v-model', (done) => {
     wrapper = mount(Stepper, {
       propsData: {
@@ -96,7 +107,14 @@ describe('Stepper', () => {
     wrapper.vm.$nextTick(() => {
       expect(wrapper.vm.currentValue).to.equal(30);
       expect(eventStub.calledWith('input'));
-      done();
+
+      // value设置非数字时，则使用设置的最小值（默认1）
+      wrapper.vm.value = 'abc';
+      wrapper.update();
+      wrapper.vm.$nextTick(() => {
+        expect(wrapper.vm.currentValue).to.equal(1);
+        done();
+      });
     });
   });