github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

input number fix change event & improve

pull/2006/head
baiyaaaaa 2016-12-27 09:24:59 +08:00 committed by 杨奕
parent 882a9d796e
commit 190211d4a9
3 changed files with 97 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
packages/input-number/src/input-number.vue
View File

@ -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,
inputActive: false
currentValue: value
};
},
watch: {
@ -126,10 +118,9 @@
},
currentValue(newVal, oldVal) {
let value = Number(newVal);
if (value <= this.max && value >= this.min) {
this.$emit('change', value, oldVal);
this.$emit('input', value);
if (newVal <= this.max && newVal >= this.min) {
this.$emit('change', newVal, oldVal);
this.$emit('input', newVal);
}
}
},
@ -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) {
if (!this.disabled && !disabled) {
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) {
handleBlur() {
this.currentValue = this.value;
} else {
this.currentValue = value;
}
},
handleInput(value) {
this.currentValue = value;
}
}
};

5
packages/theme-default/src/input-number.css
View File

@ -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 {

70
test/unit/specs/input-number.spec.js
View File

@ -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(_ => {
expect(vm.$el.querySelector('.el-input.is-active')).to.exist;
vm.$nextTick(_ => {
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;
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');
vm.$nextTick(_ => {
expect(vm.value).to.be.equal(2);
expect(input.value).to.be.equal('2');
triggerEvent(btnIncrease, 'mousedown');
triggerEvent(document, 'mouseup');
setTimeout(_ => {
expect(vm.value).to.be.equal(2);
expect(input.value).to.be.equal('2');
setTimeout(_ => {
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();
});
});
});