問題場景:
- 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);
}
}