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

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

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) {
+      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.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,9 +107,16 @@ describe('Stepper', () => {
     wrapper.vm.$nextTick(() => {
       expect(wrapper.vm.currentValue).to.equal(30);
       expect(eventStub.calledWith('input'));
+
+      // value设置非数字时，则使用设置的最小值（默认1）
+      wrapper.vm.value = 'abc';
+      wrapper.update();
+      wrapper.vm.$nextTick(() => {
+        expect(wrapper.vm.currentValue).to.equal(1);
         done();
       });
     });
+  });
 
   it('handle when input change', (done) => {
     wrapper = mount(Stepper, {