input-number: style fix && experience improve

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

@@ -6,9 +6,11 @@
     ]"
   >
     <el-input
-      v-model.number="currentValue"
+      :value="currentValue"
       @keydown.up.native="increase"
       @keydown.down.native="decrease"
+      @blur="handleBlur"
+      @input="handleInput"
       :disabled="disabled"
       :size="size"
       :class="{
@@ -111,22 +113,19 @@
       },
 
       currentValue(newVal, oldVal) {
-        if (newVal <= this.max && newVal >= this.min) {
-          this.$emit('change', newVal);
-          this.$emit('input', newVal);
-        } else {
-          this.$nextTick(() => {
-            this.currentValue = oldVal;
-          });
+        let value = Number(newVal);
+        if (value <= this.max && value >= this.min) {
+          this.$emit('change', value);
+          this.$emit('input', value);
         }
       }
     },
     computed: {
       minDisabled() {
-        return this.currentValue - this.step < this.min;
+        return this.value - this.step < this.min;
       },
       maxDisabled() {
-        return this.currentValue + this.step > this.max;
+        return this.value + this.step > this.max;
       }
     },
     methods: {
@@ -176,15 +175,15 @@
         return (arg1 + arg2) / m;
       },
       increase() {
-        if (this.currentValue + this.step > this.max || this.disabled) return;
-        this.currentValue = this.accAdd(this.step, this.currentValue);
+        if (this.value + this.step > this.max || this.disabled) return;
+        this.currentValue = this.accAdd(this.step, this.value);
         if (this.maxDisabled) {
           this.inputActive = false;
         }
       },
       decrease() {
-        if (this.currentValue - this.step < this.min || this.disabled) return;
-        this.currentValue = this.accSub(this.currentValue, this.step);
+        if (this.value - this.step < this.min || this.disabled) return;
+        this.currentValue = this.accSub(this.value, this.step);
         if (this.minDisabled) {
           this.inputActive = false;
         }
@@ -198,6 +197,17 @@
         if (!this.disabled && !disabled) {
           this.inputActive = false;
         }
+      },
+      handleBlur(event) {
+        let value = Number(this.currentValue);
+        if (isNaN(value) || value > this.max || value < this.min) {
+          this.currentValue = this.value;
+        } else {
+          this.currentValue = value;
+        }
+      },
+      handleInput(value) {
+        this.currentValue = value;
       }
     }
   };

packages/theme-default/src/input-number.css

@@ -11,6 +11,7 @@
 
     & .el-input__inner {
       appearance: none;
+      padding-right: calc(var(--input-height) * 2 + 10);
     }
     @e increase, decrease {
       height: auto;
@@ -62,6 +63,9 @@
       & .el-input-number__decrease {
         right: calc(var(--input-large-height) + 1px);
       }
+      & .el-input__inner {
+        padding-right: calc(var(--input-large-height) * 2 + 10);
+      }
     }
     @m small {
       width: 130px;
@@ -74,6 +78,9 @@
       & .el-input-number__decrease {
         right: calc(var(--input-small-height) + 1px);
       }
+      & .el-input__inner {
+        padding-right: calc(var(--input-small-height) * 2 + 10);
+      }
     }
   }
 }

test/unit/specs/input-number.spec.js

@@ -1,4 +1,4 @@
-import { createVue, triggerEvent } from '../util';
+import { createVue, triggerEvent, destroyVM } from '../util';
 
 describe('InputNumber', () => {
   it('create', () => {
@@ -17,11 +17,12 @@ describe('InputNumber', () => {
 
     expect(vm.value).to.be.equal(1);
     expect(input.value).to.be.equal('1');
+    destroyVM(vm);
   });
   it('decrease', done => {
     const vm = createVue({
       template: `
-        <el-input-number v-model="value">
+        <el-input-number v-model="value" ref="input">
         </el-input-number>
       `,
       data() {
@@ -33,23 +34,24 @@ describe('InputNumber', () => {
 
     let input = vm.$el.querySelector('input');
     let btnDecrease = vm.$el.querySelector('.el-input-number__decrease');
-    for (let i = 0; i < 3; i++) {
-      triggerEvent(btnDecrease, 'mousedown');
-      triggerEvent(document, 'mouseup');
-    }
+
     triggerEvent(btnDecrease, 'mouseenter');
+    triggerEvent(btnDecrease, 'mousedown');
+    triggerEvent(document, 'mouseup');
+
     setTimeout(_ => {
       expect(vm.$el.querySelector('.el-input.is-active')).to.exist;
-      expect(vm.value).to.be.equal(2);
-      expect(input.value).to.be.equal('2');
+      expect(vm.value).to.be.equal(4);
+      expect(input.value).to.be.equal('4');
 
       triggerEvent(btnDecrease, 'mouseleave');
 
       vm.$nextTick(_ => {
         expect(vm.$el.querySelector('.el-input.is-active')).to.not.exist;
+        destroyVM(vm);
         done();
       });
-    }, 100);
+    }, 300);
   });
   it('increase', done => {
     const vm = createVue({
@@ -66,13 +68,14 @@ describe('InputNumber', () => {
 
     let input = vm.$el.querySelector('input');
     let btnIncrease = vm.$el.querySelector('.el-input-number__increase');
-    for (let i = 0; i < 3; i++) {
-      triggerEvent(btnIncrease, 'mousedown');
-      triggerEvent(document, 'mouseup');
-    }
+
+    triggerEvent(btnIncrease, 'mousedown');
+    triggerEvent(document, 'mouseup');
+
     setTimeout(_ => {
-      expect(vm.value).to.be.equal(4.5);
-      expect(input.value).to.be.equal('4.5');
+      expect(vm.value).to.be.equal(2.5);
+      expect(input.value).to.be.equal('2.5');
+      destroyVM(vm);
       done();
     }, 100);
   });
@@ -96,15 +99,19 @@ describe('InputNumber', () => {
     triggerEvent(btnDecrease, 'mousedown');
     triggerEvent(document, 'mouseup');
 
-    for (let i = 0; i < 3; i++) {
-      triggerEvent(btnIncrease, 'mousedown');
-      triggerEvent(document, 'mouseup');
-    }
+    triggerEvent(btnIncrease, 'mousedown');
+    triggerEvent(document, 'mouseup');
 
     setTimeout(_ => {
       expect(vm.value).to.be.equal(2);
       expect(input.value).to.be.equal('2');
-      done();
+
+      setTimeout(_ => {
+        expect(vm.value).to.be.equal(2);
+        expect(input.value).to.be.equal('2');
+        destroyVM(vm);
+        done();
+      }, 100);
     }, 100);
   });
   it('step', done => {
@@ -124,20 +131,20 @@ describe('InputNumber', () => {
     let btnIncrease = vm.$el.querySelector('.el-input-number__increase');
     let btnDecrease = vm.$el.querySelector('.el-input-number__decrease');
 
-    for (let i = 0; i < 2; i++) {
-      triggerEvent(btnIncrease, 'mousedown');
-      triggerEvent(document, 'mouseup');
-    }
+    triggerEvent(btnIncrease, 'mousedown');
+    triggerEvent(document, 'mouseup');
+
     setTimeout(_ => {
-      expect(vm.value).to.be.equal(11.4);
-      expect(input.value).to.be.equal('11.4');
+      expect(vm.value).to.be.equal(8.2);
+      expect(input.value).to.be.equal('8.2');
 
       triggerEvent(btnDecrease, 'mousedown');
       triggerEvent(document, 'mouseup');
 
       setTimeout(_ => {
-        expect(vm.value).to.be.equal(8.2);
-        expect(input.value).to.be.equal('8.2');
+        expect(vm.value).to.be.equal(5);
+        expect(input.value).to.be.equal('5');
+        destroyVM(vm);
         done();
       }, 100);
     }, 100);
@@ -150,7 +157,7 @@ describe('InputNumber', () => {
       `,
       data() {
         return {
-          value: 9
+          value: 6
         };
       }
     }, true);
@@ -171,13 +178,14 @@ describe('InputNumber', () => {
 
     let input = vm.$el.querySelector('input');
     let btnDecrease = vm.$el.querySelector('.el-input-number__decrease');
-    for (let i = 0; i < 5; i++) {
-      triggerEvent(btnDecrease, 'mousedown');
-      triggerEvent(document, 'mouseup');
-    }
+
+    triggerEvent(btnDecrease, 'mousedown');
+    triggerEvent(document, 'mouseup');
+
     setTimeout(_ => {
       expect(vm.value).to.be.equal(6);
       expect(input.value).to.be.equal('6');
+      destroyVM(vm);
       done();
     }, 100);
   });
@@ -189,7 +197,7 @@ describe('InputNumber', () => {
       `,
       data() {
         return {
-          value: 5
+          value: 8
         };
       }
     }, true);
@@ -210,13 +218,14 @@ describe('InputNumber', () => {
 
     let input = vm.$el.querySelector('input');
     let btnIncrease = vm.$el.querySelector('.el-input-number__increase');
-    for (let i = 0; i < 5; i++) {
-      triggerEvent(btnIncrease, 'mousedown');
-      triggerEvent(document, 'mouseup');
-    }
+
+    triggerEvent(btnIncrease, 'mousedown');
+    triggerEvent(document, 'mouseup');
+
     setTimeout(_ => {
       expect(vm.value).to.be.equal(8);
       expect(input.value).to.be.equal('8');
+      destroyVM(vm);
       done();
     }, 100);
   });