Merge pull request #4315 from huanghong1125/input-number

update input-number

examples/routers/input-number.vue

@@ -54,7 +54,24 @@
         <InputNumber v-model="value3" style="width: 200px" placeholder="Enter something..."></InputNumber> -->
 
         
-        <InputNumber v-model="valueNull" style="width: 200px" :min='0' :max='10000'  :precision='2' ></InputNumber>
+        <InputNumber v-model="valueNull" style="width: 200px" :min='1' :max='10000'  :precision='2' ></InputNumber>
+        <InputNumber v-model="valueNull" style="width: 200px" ></InputNumber>
+        <div style="margin:10px 0px">
+            <InputNumber :activeChange="false" v-model="valueNull" style="width: 200px" :min='1' :max='10000'  :precision='2' ></InputNumber>
+            <InputNumber :activeChange="false" v-model="valueNull" style="width: 200px" ></InputNumber>
+        </div>
+        <div style="margin:10px 0px">
+            <InputNumber
+                :max="10000"
+                v-model="value9"
+                :formatter="value => `$ ${value}`.replace(/B(?=(d{3})+(?!d))/g, ',')"
+                :parser="value => value.replace(/\$s?|(,*)/g, '')"></InputNumber>
+            <InputNumber
+                :max="100"
+                v-model="value10"
+                :formatter="value => `${value}%`"
+                :parser="value => value.replace('%', '')"></InputNumber>
+        </div>
     </div>
 </template>
 <script>
@@ -68,16 +85,18 @@
                 formatter: (value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ','),
                 parser: (value) => value.replace(/\$\s?|(,*)/g, ''),
                 formatter2: (value) => `${value}%`,
-                parser2: (value) => value.replace('%', '')
+                parser2: (value) => value.replace('%', ''),
-            }
+                value9: 1000,
+                value10: 100
+            };
         },
         methods: {
             focus (e) {
-                e.target.select()
+                e.target.select();
             },
             change (v) {
-                console.log(v)
+                console.log(v);
             }
         }
-    }
+    };
 </script>

src/components/input-number/input-number.vue

@@ -3,13 +3,11 @@
         <div :class="handlerClasses">
             <a
                 @click="up"
-                @mousedown="preventDefault"
                 :class="upClasses">
                 <span :class="innerUpClasses" @click="preventDefault"></span>
             </a>
             <a
                 @click="down"
-                @mousedown="preventDefault"
                 :class="downClasses">
                 <span :class="innerDownClasses" @click="preventDefault"></span>
             </a>
@@ -82,6 +80,10 @@
                 type: Number,
                 default: 1
             },
+            activeChange:{
+                type:Boolean,
+                default:true
+            },
             value: {
                 type: Number,
                 default: 1
@@ -253,6 +255,15 @@
                 // 如果 step 是小数，且没有设置 precision，是有问题的
                 if (val && !isNaN(this.precision)) val = Number(Number(val).toFixed(this.precision));
                 
+                const {min, max} = this;
+                if (val!==null) {
+                    if (val > max) {
+                        val = max;
+                    } else if (val < min) {
+                        val = min;
+                    } 
+                }
+                
                 this.$nextTick(() => {
                     this.currentValue = val;
                     this.$emit('input', val);
@@ -278,42 +289,32 @@
                 }
             },
             change (event) {
+                
+                if (event.type == 'input' && !this.activeChange) return; 
                 let val = event.target.value.trim();
                 if (this.parser) {
                     val = this.parser(val);
                 }
                 
-                if (event.type == 'input' && val.match(/^\-?\.?$|\.$/)) return; // prevent fire early if decimal. If no more input the change event will fire later
-
-                const {min, max} = this;
                 const isEmptyString = val.length === 0;
-                val = Number(val);
-
                 if(isEmptyString){
                     this.setValue(null);
                     return;
                 }
-                if (event.type == 'change'){
+                if (event.type == 'input' && val.match(/^\-?\.?$|\.$/)) return; // prevent fire early if decimal. If no more input the change event will fire later 
-                    if (val === this.currentValue && val > min && val < max) return; // already fired change for input event
-                }
                 
-                if (!isNaN(val) && !isEmptyString) {
+                val = Number(val);
+
+                if (!isNaN(val)) {
                     this.currentValue = val;
-
+                    this.setValue(val);
-                    if (event.type == 'input' && val < min) return; // prevent fire early in case user is typing a bigger number. Change will handle this otherwise.
-                    if (val > max) {
-                        this.setValue(max);
-                    } else if (val < min) {
-                        this.setValue(min);
-                    } else {
-                        this.setValue(val);
-                    }
                 } else {
                     event.target.value = this.currentValue;
                 }
             },
             changeVal (val) {
                 val = Number(val);
+                //this.setValue(val);
                 if (!isNaN(val)) {
                     const step = this.step;