input number fix change event & improve

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

@@ -6,31 +6,11 @@
       { 'is-without-controls': !controls}
     ]"
   >
-    <el-input
-      :value="currentValue"
-      @keydown.up.native="increase"
-      @keydown.down.native="decrease"
-      @blur="handleBlur"
-      @input="handleInput"
-      :disabled="disabled"
-      :size="size"
-      :class="{
-        'is-active': inputActive
-      }">
-        <template slot="prepend" v-if="$slots.prepend">
-          <slot name="prepend"></slot>
-        </template>
-        <template slot="append" v-if="$slots.append">
-          <slot name="append"></slot>
-        </template> 
-    </el-input>
     <span
       v-if="controls"
       class="el-input-number__decrease el-icon-minus"
       :class="{'is-disabled': minDisabled}"
       v-repeat-click="decrease"
-      @mouseenter="activeInput(minDisabled)"
-      @mouseleave="inactiveInput(minDisabled)"
     >
     </span>
     <span
@@ -38,10 +18,23 @@
       class="el-input-number__increase el-icon-plus"
       :class="{'is-disabled': maxDisabled}"
       v-repeat-click="increase"
-      @mouseenter="activeInput(maxDisabled)"
-      @mouseleave="inactiveInput(maxDisabled)"
     >
     </span>
+    <el-input
+      v-model.number="currentValue"
+      @keydown.up.native="increase"
+      @keydown.down.native="decrease"
+      @blur="handleBlur"
+      :disabled="disabled"
+      :size="size"
+    >
+        <template slot="prepend" v-if="$slots.prepend">
+          <slot name="prepend"></slot>
+        </template>
+        <template slot="append" v-if="$slots.append">
+          <slot name="append"></slot>
+        </template> 
+    </el-input>
   </div>
 </template>
 <script>
@@ -50,29 +43,6 @@
 
   export default {
     name: 'ElInputNumber',
-    props: {
-      step: {
-        type: Number,
-        default: 1
-      },
-      max: {
-        type: Number,
-        default: Infinity
-      },
-      min: {
-        type: Number,
-        default: 0
-      },
-      value: {
-        default: 0
-      },
-      disabled: Boolean,
-      size: String,
-      controls: {
-        type: Boolean,
-        default: true
-      }
-    },
     directives: {
       repeatClick: {
         bind(el, binding, vnode) {
@@ -104,6 +74,29 @@
     components: {
       ElInput
     },
+    props: {
+      step: {
+        type: Number,
+        default: 1
+      },
+      max: {
+        type: Number,
+        default: Infinity
+      },
+      min: {
+        type: Number,
+        default: 0
+      },
+      value: {
+        default: 0
+      },
+      disabled: Boolean,
+      size: String,
+      controls: {
+        type: Boolean,
+        default: true
+      }
+    },
     data() {
       // correct the init value
       let value = this.value;
@@ -116,8 +109,7 @@
         value = this.max;
       }
       return {
-        currentValue: value,
+        currentValue: value
-        inputActive: false
       };
     },
     watch: {
@@ -126,10 +118,9 @@
       },
 
       currentValue(newVal, oldVal) {
-        let value = Number(newVal);
+        if (newVal <= this.max && newVal >= this.min) {
-        if (value <= this.max && value >= this.min) {
+          this.$emit('change', newVal, oldVal);
-          this.$emit('change', value, oldVal);
+          this.$emit('input', newVal);
-          this.$emit('input', value);
         }
       }
     },
@@ -188,41 +179,19 @@
         return (arg1 + arg2) / m;
       },
       increase() {
+        if (this.maxDisabled) return;
         const value = this.value || 0;
         if (value + this.step > this.max || this.disabled) return;
         this.currentValue = this.accAdd(this.step, value);
-        if (this.maxDisabled) {
-          this.inputActive = false;
-        }
       },
       decrease() {
+        if (this.minDisabled) return;
         const value = this.value || 0;
         if (value - this.step < this.min || this.disabled) return;
         this.currentValue = this.accSub(value, this.step);
-        if (this.minDisabled) {
-          this.inputActive = false;
-        }
       },
-      activeInput(disabled) {
+      handleBlur() {
-        if (!this.disabled && !disabled) {
+        this.currentValue = this.value;
-          this.inputActive = true;
-        }
-      },
-      inactiveInput(disabled) {
-        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

@@ -23,9 +23,14 @@
       color: #99A9BF;
       cursor: pointer;
       position: absolute;
+      z-index: 1;
 
       &:hover {
         color: var(--color-primary);
+
+        &:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled) {
+          border-color: var(--input-focus-border);
+        }
       }
 
       @when disabled {

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

@@ -38,22 +38,14 @@ describe('InputNumber', () => {
     let input = vm.$el.querySelector('input');
     let btnDecrease = vm.$el.querySelector('.el-input-number__decrease');
 
-    triggerEvent(btnDecrease, 'mouseenter');
     triggerEvent(btnDecrease, 'mousedown');
     triggerEvent(document, 'mouseup');
 
-    setTimeout(_ => {
+    vm.$nextTick(_ => {
-      expect(vm.$el.querySelector('.el-input.is-active')).to.exist;
       expect(vm.value).to.be.equal(4);
       expect(input.value).to.be.equal('4');
-
+      done();
-      triggerEvent(btnDecrease, 'mouseleave');
+    });
-
-      vm.$nextTick(_ => {
-        expect(vm.$el.querySelector('.el-input.is-active')).to.not.exist;
-        done();
-      });
-    }, 300);
   });
   it('increase', done => {
     vm = createVue({
@@ -74,11 +66,11 @@ describe('InputNumber', () => {
     triggerEvent(btnIncrease, 'mousedown');
     triggerEvent(document, 'mouseup');
 
-    setTimeout(_ => {
+    vm.$nextTick(_ => {
       expect(vm.value).to.be.equal(2.5);
       expect(input.value).to.be.equal('2.5');
       done();
-    }, 100);
+    });
   });
   it('disabled', done => {
     vm = createVue({
@@ -100,19 +92,19 @@ describe('InputNumber', () => {
     triggerEvent(btnDecrease, 'mousedown');
     triggerEvent(document, 'mouseup');
 
-    triggerEvent(btnIncrease, 'mousedown');
+    vm.$nextTick(_ => {
-    triggerEvent(document, 'mouseup');
-
-    setTimeout(_ => {
       expect(vm.value).to.be.equal(2);
       expect(input.value).to.be.equal('2');
 
-      setTimeout(_ => {
+      triggerEvent(btnIncrease, 'mousedown');
+      triggerEvent(document, 'mouseup');
+
+      vm.$nextTick(_ => {
         expect(vm.value).to.be.equal(2);
         expect(input.value).to.be.equal('2');
         done();
-      }, 100);
+      });
-    }, 100);
+    });
   });
   it('step', done => {
     vm = createVue({
@@ -134,19 +126,19 @@ describe('InputNumber', () => {
     triggerEvent(btnIncrease, 'mousedown');
     triggerEvent(document, 'mouseup');
 
-    setTimeout(_ => {
+    vm.$nextTick(_ => {
       expect(vm.value).to.be.equal(8.2);
       expect(input.value).to.be.equal('8.2');
 
       triggerEvent(btnDecrease, 'mousedown');
       triggerEvent(document, 'mouseup');
 
-      setTimeout(_ => {
+      vm.$nextTick(_ => {
         expect(vm.value).to.be.equal(5);
         expect(input.value).to.be.equal('5');
         done();
-      }, 100);
+      });
-    }, 100);
+    });
   });
   it('min', done => {
     vm = createVue({
@@ -181,11 +173,11 @@ describe('InputNumber', () => {
     triggerEvent(btnDecrease, 'mousedown');
     triggerEvent(document, 'mouseup');
 
-    setTimeout(_ => {
+    vm.$nextTick(_ => {
       expect(vm.value).to.be.equal(6);
       expect(input.value).to.be.equal('6');
       done();
-    }, 100);
+    });
   });
   it('max', done => {
     vm = createVue({
@@ -220,11 +212,11 @@ describe('InputNumber', () => {
     triggerEvent(btnIncrease, 'mousedown');
     triggerEvent(document, 'mouseup');
 
-    setTimeout(_ => {
+    vm.$nextTick(_ => {
       expect(vm.value).to.be.equal(8);
       expect(input.value).to.be.equal('8');
       done();
-    }, 100);
+    });
   });
   it('controls', () => {
     vm = createVue({
@@ -242,4 +234,30 @@ describe('InputNumber', () => {
     expect(vm.$el.querySelector('.el-input-number__decrease')).to.not.exist;
     expect(vm.$el.querySelector('.el-input-number__increase')).to.not.exist;
   });
+  it('event:change', done => {
+    vm = createVue({
+      template: `
+        <el-input-number v-model="value" ref="input">
+        </el-input-number>
+      `,
+      data() {
+        return {
+          value: 1.5
+        };
+      }
+    }, true);
+
+    let btnIncrease = vm.$el.querySelector('.el-input-number__increase');
+    const spy = sinon.spy();
+
+    vm.$refs.input.$on('change', spy);
+
+    triggerEvent(btnIncrease, 'mousedown');
+    triggerEvent(document, 'mouseup');
+
+    vm.$nextTick(_ => {
+      expect(spy.withArgs(2.5, 1.5).calledOnce).to.be.true;
+      done();
+    });
+  });
 });