InputNumber support null values

huanghong
1 parent 14b7409b
Showing 2 changed files with 11 additions and 1 deletions Show diff stats
examples/routers/input-number.vue
src/components/input-number/input-number.vue
@@ -43,6 +43,11 @@
     <div>
         <InputNumber :max="1000000000" :min="1" v-model="value1" :formatter="formatter" :parser="parser" @on-change="change" style="width: 200px"></InputNumber>
         <InputNumber :max="1000000000" :min="1" v-model="value2" :formatter="formatter2" :parser="parser2" @on-change="change" style="width: 200px"></InputNumber>
+        
+        <InputNumber @on-change="change" style="width: 200px"></InputNumber>
+        
+        <InputNumber v-model="valueNull" @on-change="change" style="width: 200px"></InputNumber>
+        <InputNumber v-model="valueNull" @on-change="change" :formatter="formatter" :parser="parser" style="width: 200px"></InputNumber>
     </div>
 </template>
 <script>
@@ -51,6 +56,7 @@
             return {
                 value1: 1800000,
                 value2: 55,
+                valueNull:null,
                 formatter: (value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ','),
                 parser: (value) => value.replace(/\$\s?|(,*)/g, ''),
                 formatter2: (value) => `${value}%`,
@@ -178,7 +178,7 @@
                 return this.precision ? this.currentValue.toFixed(this.precision) : this.currentValue;
             },
             formatterValue () {
-                if (this.formatter) {
+                if (this.formatter && this.precisionValue !== null) {
                     return this.formatter(this.precisionValue);
                 } else {
                     return this.precisionValue;
@@ -279,6 +279,10 @@
                 const isEmptyString = val.length === 0;
                 val = Number(val);
+                if(isEmptyString){
+                    this.setValue(null);
+                    return;
+                }
                 if (event.type == 'change'){
                     if (val === this.currentValue && val > min && val < max) return; // already fired change for input event
                 }