Vue - 自定义指令 - input 只能输入数字类型可设置小数点及小数点后几位

Vue 全局 自定义指令input 只能输入 数值类型1. 编写指令文件2. 全局注册指令3. 使用input 只能输入 数值类型1. 编写指令文件scr/directive/input/HiInputNumberLimit.jsVue.directive(hi-input-number-limit,{bind(el,binding,vnode){constinputel.querySelector(input);if(!input)return;input.addEventListener(input,function(){letvalthis.value;if(binding.value0){valval.replace(/[^\d.]/g,);valval.replace(.,);}elseif(binding.value1){valval.replace(/[^\d.]/g,);valval.replace(/\.{2,}/g,.);valval.replace(/\.(\d{1}).*/,.$1);}elseif(binding.value2){valval.replace(/[^\d.]/g,);valval.replace(/\.{2,}/g,.);valval.replace(/\.(\d{2}).*/,.$1);}elseif(binding.value3){valval.replace(/[^\d.]/g,);valval.replace(/\.{2,}/g,.);valval.replace(/\.(\d{3}).*/,.$1);}else{valval.replace(/[^\d.]/g,);valval.replace(/\.{2,}/g,.);valval.replace(/\.(\d{2}).*/,.$1);}if(val.indexOf(.)!0){valval.replace(/^0(?\d)/,);}if(val.||val){val;}this.valueval;// 手动触发 input 事件确保 v-model 同步 -- 报错可注释this.dispatchEvent(newEvent(input));});}});2. 全局注册指令/scr/main.jsimportHiInputNumberLimitfromscr/directive/input/HiInputNumberLimit.jsVue.use(HiInputNumberLimit)3. 使用el-input v-modelamountv-hi-input-number-limit placeholder请输入/el-inputel-input v-modelamountv-hi-input-number-limit3placeholder请输入/el-input