mirrors/element
1
0
Fork 0
mirror of https://github.com/ElemeFE/element.git synced 2025-12-19 12:04:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

input-number: style fix && experience improve

Browse Source
This commit is contained in:
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
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
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;
}
}
};