drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

optimize InputNumber when input a number than keydown

Browse source 
optimize InputNumber when input a number than keydown
This commit is contained in:
梁灏 2017-01-16 20:34:52 +08:00
parent 6986d05501
commit 1ff551864c
2 changed files with 34 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
src/components/input-number/input-number.vue
View file

@ -144,32 +144,52 @@
preventDefault (e) { preventDefault (e) {
e.preventDefault(); e.preventDefault();
}, },
up () { up (e) {
if (this.upDisabled) { const targetVal = Number(e.target.value);
if (this.upDisabled && isNaN(targetVal)) {
return false; return false;
} }
this.changeStep('up'); this.changeStep('up', e);
}, },
down () { down (e) {
if (this.downDisabled) { const targetVal = Number(e.target.value);
if (this.downDisabled && isNaN(targetVal)) {
return false; return false;
} }
this.changeStep('down'); this.changeStep('down', e);
}, },
changeStep (type) { changeStep (type, e) {
if (this.disabled) { if (this.disabled) {
return false; return false;
} }
const targetVal = Number(e.target.value);
let val = Number(this.value); let val = Number(this.value);
const step = Number(this.step); const step = Number(this.step);
if (isNaN(val)) { if (isNaN(val)) {
return false; return false;
} }
if (type == 'up') { // input a number, and key up or down
if (!isNaN(targetVal)) {
if (type === 'up') {
if (addNum(targetVal, step) <= this.max) {
val = targetVal;
} else {
return false;
}
} else if (type === 'down') {
if (addNum(targetVal, -step) >= this.min) {
val = targetVal;
} else {
return false;
}
}
}
if (type === 'up') {
val = addNum(val, step); val = addNum(val, step);
} else if (type == 'down') { } else if (type === 'down') {
val = addNum(val, -step); val = addNum(val, -step);
} }
this.setValue(val); this.setValue(val);
@ -190,10 +210,10 @@
keyDown (e) { keyDown (e) {
if (e.keyCode === 38) { if (e.keyCode === 38) {
e.preventDefault(); e.preventDefault();
this.up(); this.up(e);
} else if (e.keyCode === 40) { } else if (e.keyCode === 40) {
e.preventDefault(); e.preventDefault();
this.down(); this.down(e);
} }
}, },
change (event) { change (event) {
@ -230,7 +250,7 @@
} }
} }
}, },
ready () { compiled () {
this.changeVal(this.value); this.changeVal(this.value);
}, },
watch: { watch: {

2
test/routers/input.vue
View file

@ -1,4 +1,6 @@
<template> <template>
<Input-number :max="10" :min="1" :value="1"></Input-number>
<br><br>
<i-input type="textarea" :autosize="true" placeholder="请输入..."></i-input> <i-input type="textarea" :autosize="true" placeholder="请输入..."></i-input>
<i-input type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></i-input> <i-input type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></i-input>
<i-input name="a" icon="ios-clock-outline" @on-focus="focus" @on-blur="blur" readonly style="width:200px;" :value.sync="v" @on-enter="enter" @on-click="iconclick" size="large" placeholder="请输入"></i-input> <i-input name="a" icon="ios-clock-outline" @on-focus="focus" @on-blur="blur" readonly style="width:200px;" :value.sync="v" @on-enter="enter" @on-click="iconclick" size="large" placeholder="请输入"></i-input>