问题场景:
- InputNumber组件在设置precision精度后,每次输入都会自动填充导致光标后移,影响输入体验。
//步骤一
<FormItem prop="hitThreshold" label="命中率阈值">
<InputNumber
ref="number"
v-model="modalForm.hitThreshold"
:formatter="formatter"
:min="0"
placeholder="命中率阈值"/>
</FormItem>
//步骤三(工具函数)
const formatter=(VauleNumber,length=3)=>{
let newNumber= null;
if(!isNaN(VauleNumber)){
if (VauleNumber >= 0) {
let reg = /.*\..*/
if (reg.test(VauleNumber)&&String(VauleNumber).split(".")[1].length>length) {
newNumber= parseFloat(VauleNumber).toFixed(length)
} else {
newNumber= VauleNumber
}
}
return newNumber
}
return 0
}
//步骤二
data() {
return {
modalForm:{hitThreshold:null},
modalRule:{...自己表单字段}
};
},
mounted(){
//重置掉当前组件的函数
this.$refs.number.setValue=function(val){
this.$nextTick(() => {
this.currentValue = val;
this.$emit('input', val);
this.$emit('on-change', val);
this.dispatch('FormItem', 'on-form-change', val);
});
}
},
methods: {
formatter(VauleNumber){
return formatter(VauleNumber,2);
}
}