feat(Stepper): add new prop async-change @rex-zsd (#2318)

packages/stepper/demo/index.vue

@@ -11,9 +11,18 @@
       />
     </demo-block>
 
+    <demo-block :title="$t('asyncChange')">
+      <van-stepper
+        :value="stepper2"
+        integer
+        async-change
+        @change="onChange"
+      />
+    </demo-block>
+
     <demo-block :title="$t('advancedUsage')">
       <van-stepper
-        v-model="stepper2"
+        v-model="stepper3"
         integer
         :min="5"
         :max="40"
@@ -26,11 +35,26 @@
 
 <script>
 export default {
+  i18n: {
+    'zh-CN': {
+      asyncChange: '异步变更'
+    },
+    'en-US': {
+      asyncChange: 'Async Change',
+    }
+  },
+
   data() {
     return {
       stepper1: 1,
-      stepper2: null
+      stepper2: 10,
+      stepper3: null
     };
+  },
+  methods: {
+    onChange(event) {
+      this.$toast(`change: ${event}`);
+    }
   }
 };
 </script>

packages/stepper/en-US.md

@@ -55,6 +55,7 @@ export default {
 | integer | Whether to allow only integers | `Boolean` | `false` |
 | disabled | Disable value change | `Boolean` | `false` |
 | disable-input | Disable input | `Boolean` | `false` |
+| async-change | not change input value, only emit event | `Boolean` | `false` | - |
 
 ### Event
 

packages/stepper/index.vue

@@ -29,6 +29,7 @@ export default create({
     value: null,
     integer: Boolean,
     disabled: Boolean,
+    asyncChange: Boolean,
     disableInput: Boolean,
     min: {
       type: [String, Number],
@@ -98,11 +99,16 @@ export default create({
       const { value } = event.target;
       const formatted = this.format(value);
 
-      if (+value !== formatted) {
+      if (!this.asyncChange) {
-        event.target.value = formatted;
+        if (+value !== formatted) {
+          event.target.value = formatted;
+        }
+        this.currentValue = formatted;
+      } else {
+        event.target.value = this.currentValue;
+        this.$emit('input', formatted);
+        this.$emit('change', formatted);
       }
-
-      this.currentValue = formatted;
     },
 
     onChange(type) {
@@ -113,7 +119,13 @@ export default create({
 
       const diff = type === 'minus' ? -this.step : +this.step;
       const value = Math.round((this.currentValue + diff) * 100) / 100;
-      this.currentValue = this.range(value);
+
+      if (!this.asyncChange) {
+        this.currentValue = this.range(value);
+      } else {
+        this.$emit('input', value);
+        this.$emit('change', value);
+      }
       this.$emit(type);
     },
 

packages/stepper/test/__snapshots__/demo.spec.js.snap

@@ -8,6 +8,9 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button> <input type="number" disabled="disabled" value="1" class="van-stepper__input"> <button class="van-stepper__plus van-stepper__plus--disabled"></button></div>
   </div>
+  <div>
+    <div class="van-stepper"><button class="van-stepper__minus"></button> <input type="number" value="10" class="van-stepper__input"> <button class="van-stepper__plus"></button></div>
+  </div>
   <div>
     <div class="van-stepper"><button class="van-stepper__minus"></button> <input type="number" value="9" class="van-stepper__input"> <button class="van-stepper__plus"></button></div>
   </div>

packages/stepper/zh-CN.md

@@ -57,6 +57,7 @@ export default {
 | integer | 是否只允许输入整数 | `Boolean` | `false` | 1.1.1 |
 | disabled | 是否禁用步进器 | `Boolean` | `false` | - |
 | disable-input | 是否禁用输入框 | `Boolean` | `false` | - |
+| async-change | 异步变更，为 `true` 时input值不变化，仅触发事件 | `Boolean` | `false` | - |
 
 ### Event