vue3 自定义指令控制输入框只能输入数字，小数

1. 指令使用例子
   

   <el-input v-model="input1" style="width: 240px" placeholder="Please input" v-format-number="{ precision: 2 }" />

    

2. 指令代码
   

   const vFormatNumber = {
     mounted(el, binding) {
       el.addEventListener('input', (event) => { 
         let newVal = event.target.value;
         const precision = binding.value.precision
   
         newVal = newVal.replace(/[^\d.]/g, '') // 能数字和小数点
         newVal = newVal.replace(/^\./g, '') // 去掉开头的点
         newVal = newVal.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.') // 处理多个点的情况
         if (precision && Number(precision) > 0) {
           const d = new Array(Number(precision)).fill('\\d').join('') // 构建正则表达式
           const reg = new RegExp(`^(\\-)*(\\d+)\\.(${d}).*$`, 'ig')
           newVal = newVal.replace(reg, '$1$2.$3') // 限制小数位数
         }
         if (newVal && !newVal.includes('.')) {
           newVal = newVal.replace(/^0+/, '0')  // 
         }
   
         // 更新输入框的值
         event.target.value = newVal;
         // 同步 v-model 的值
         el.querySelector("input").dispatchEvent(new Event("input"))
       })
     }
   }