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

input-number: style fix && experience improve

pull/763/head
baiyaaaaa 2016-11-01 11:16:56 +08:00 committed by cinwell.li
parent a290d77016
commit 07345868f6
3 changed files with 78 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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