update input-number

This commit is contained in:
huanghong 2018-08-15 10:01:52 +08:00
parent 737e9b8d2b
commit 886aeeb0ed
2 changed files with 16 additions and 19 deletions

View file

@ -54,7 +54,8 @@
<InputNumber v-model="value3" style="width: 200px" placeholder="Enter something..."></InputNumber> --> <InputNumber v-model="value3" style="width: 200px" placeholder="Enter something..."></InputNumber> -->
<InputNumber v-model="valueNull" style="width: 200px" :min='0' :max='10000' :precision='2' ></InputNumber> <InputNumber v-model="valueNull" style="width: 200px" :min='-1000' :max='10000' :precision='2' ></InputNumber>
<InputNumber v-model="valueNull" style="width: 200px" ></InputNumber>
</div> </div>
</template> </template>
<script> <script>

View file

@ -253,6 +253,12 @@
// step precision // step precision
if (val && !isNaN(this.precision)) val = Number(Number(val).toFixed(this.precision)); if (val && !isNaN(this.precision)) val = Number(Number(val).toFixed(this.precision));
const {min, max} = this;
if (val > max) {
val = max;
} else if (val < min) {
val = min;
}
this.$nextTick(() => { this.$nextTick(() => {
this.currentValue = val; this.currentValue = val;
this.$emit('input', val); this.$emit('input', val);
@ -278,42 +284,32 @@
} }
}, },
change (event) { change (event) {
if (event.type == 'input') return;
let val = event.target.value.trim(); let val = event.target.value.trim();
if (this.parser) { if (this.parser) {
val = this.parser(val); val = this.parser(val);
} }
if (event.type == 'input' && val.match(/^\-?\.?$|\.$/)) return; // prevent fire early if decimal. If no more input the change event will fire later
const {min, max} = this; const {min, max} = this;
const isEmptyString = val.length === 0; const isEmptyString = val.length === 0;
val = Number(val);
if(isEmptyString){ if(isEmptyString){
this.setValue(null); this.setValue(null);
return; return;
} }
if (event.type == 'change'){ //if (event.type == 'input' && val.match(/^\-?\.?$|\.$/)) return; // prevent fire early if decimal. If no more input the change event will fire later
if (val === this.currentValue && val > min && val < max) return; // already fired change for input event
} val = Number(val);
if (!isNaN(val) && !isEmptyString) { if (!isNaN(val)) {
this.currentValue = val; this.currentValue = val;
this.setValue(val);
if (event.type == 'input' && val < min) return; // prevent fire early in case user is typing a bigger number. Change will handle this otherwise.
if (val > max) {
this.setValue(max);
} else if (val < min) {
this.setValue(min);
} else {
this.setValue(val);
}
} else { } else {
event.target.value = this.currentValue; event.target.value = this.currentValue;
} }
}, },
changeVal (val) { changeVal (val) {
val = Number(val); val = Number(val);
//this.setValue(val);
if (!isNaN(val)) { if (!isNaN(val)) {
const step = this.step; const step = this.step;