iView中InpuNumber限定小數位最佳實踐,其他都是垃圾

問題場景:

  • 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);
    }
  }

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章