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

optimize the inputNumber

Browse source 
fixed bug
1. when setting the precision, inputNumer cannot input '.' bug
2. when setting  the precision, the cursor positoning bug
This commit is contained in:
mo.duan 2019-09-02 12:07:10 +08:00
parent 6daad53fdf
commit 5ece780d09
2 changed files with 26 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
examples/routers/input-number.vue
View file

@ -72,6 +72,9 @@
:formatter="value => `${value}%`"
:parser="value => value.replace('%', '')"></InputNumber>
</div>
<div style="margin-top: 10px">
<InputNumber v-model="value4" style="width: 200px" :precision='2' ></InputNumber>
</div>
</div>
</template>
<script>
@ -81,6 +84,7 @@
value1: 1800000,
value2: 55,
value3: 100,
value4 : null,
valueNull:null,
formatter: (value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ','),
parser: (value) => value.replace(/\$\s?|(,*)/g, ''),

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

@ -24,6 +24,7 @@
@blur="blur"
@keydown.stop="keyDown"
@input="change"
ref="precisionCursor"
@mouseup="preventDefault"
@change="change"
:readonly="readonly || !editable"
@ -305,15 +306,24 @@
this.setValue(null);
return;
}
if (event.type == 'input' && val.match(/^\-?\.?$|\.$/)) return; // prevent fire early if decimal. If no more input the change event will fire later
if (event.type == 'input' && val.match(/^\-?\.?$|\.$/g)) return; // prevent fire early if decimal. If no more input the change event will fire later
//#fixed when setting the precision val, input point cannot show problem
const precision = this.precision;
let cacheVal = this.currentValue;
if( precision ){
const valMatchPointArr = (val+'').match(/\./g);
if( valMatchPointArr && valMatchPointArr.length >= 2 ){
cacheVal = this.currentValue + '.';
}
}
val = Number(val);
if (!isNaN(val)) {
if (!isNaN(val) ) {
this.currentValue = val;
this.setValue(val);
} else {
event.target.value = this.currentValue;
event.target.value = cacheVal;
}
},
changeVal (val) {
@ -338,6 +348,14 @@
},
currentValue (val) {
this.changeVal(val);
//optimization - Solve the problem of cursor positioning inaccuracy
this.$nextTick(()=>{
if( this.precision ){
const currentValueLength = ( this.currentValue || 0 ).toString().length;
const precisionCursor = this.$refs.precisionCursor;
precisionCursor.selectionStart = precisionCursor.selectionEnd = currentValueLength;
}
});
},
min () {
this.changeVal(this.currentValue);