InputNumber: improve user experience when typing, fix #4661 (#4712)

examples/docs/en-US/input-number.md

@@ -126,6 +126,7 @@ Additional `large` and `small` sizes of the input box are available
 |size | size of the component | string | large/small| — |
 |disabled| whether the component is disabled | boolean | — | false |
 |controls| whether to enable the control buttons | boolean | — | true |
+|debounce| debounce delay when typing, in millisecond | number | — | 300 |
 
 ### Events
 

examples/docs/zh-CN/input-number.md

@@ -131,6 +131,7 @@
 | size     | 计数器尺寸           | string   | large, small | — |
 | disabled | 是否禁用计数器        | boolean | — | false |
 | controls | 是否使用控制按钮        | boolean | — | true |
+| debounce | 输入时的去抖延迟，毫秒 | number | — | 300 |
 
 ### Events
 | 事件名称 | 说明 | 回调参数 |

packages/input-number/src/input-number.vue

@@ -27,7 +27,7 @@
       @keydown.up.native.prevent="increase"
       @keydown.down.native.prevent="decrease"
       @blur="handleBlur"
-      @input="handleInput"
+      @input="debounceHandleInput"
       :disabled="disabled"
       :size="size"
       :max="max"
@@ -46,6 +46,7 @@
 <script>
   import ElInput from 'element-ui/packages/input';
   import { once, on } from 'element-ui/src/utils/dom';
+  import debounce from 'throttle-debounce/debounce';
 
   export default {
     name: 'ElInputNumber',
@@ -96,6 +97,10 @@
       controls: {
         type: Boolean,
         default: true
+      },
+      debounce: {
+        type: Number,
+        default: 300
       }
     },
     data() {
@@ -177,17 +182,30 @@
         const oldVal = this.currentValue;
         if (newVal >= this.max) newVal = this.max;
         if (newVal <= this.min) newVal = this.min;
-        if (oldVal === newVal) return;
+        if (oldVal === newVal) {
+          this.$refs.input.setCurrentValue(this.currentValue);
+          return;
+        }
         this.$emit('change', newVal, oldVal);
         this.$emit('input', newVal);
         this.currentValue = newVal;
       },
       handleInput(value) {
+        if (value === '') {
+          return;
+        }
         const newVal = Number(value);
         if (!isNaN(newVal)) {
           this.setCurrentValue(newVal);
+        } else {
+          this.$refs.input.setCurrentValue(this.currentValue);
         }
       }
+    },
+    created() {
+      this.debounceHandleInput = debounce(this.debounce, value => {
+        this.handleInput(value);
+      });
     }
   };
 </script>