1。使用修饰符实现数字输入在VUE中，可以在v-modal后面加上修饰符来限制输入，例如：.number可以限制数字输入，但是有会出现如下问题：type="number"会出现自己的样式，当然可以通过添加如下css来清除/*normalIEbrowserstyleclear*/input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none!important;}/*Firefoxstyleclear*/input[type="number"]{-moz-appearance:textfield;}可以输入特殊符号+-。无限期，这将导致清除数据中的值testValue。这里的修改器无法实现自定义限制输入，不能满足要求。2.通过@input监听监听输入框变化和更新数据，实现只能输入数字，可以自定义限制输入内容该方法可以满足需求，但是不能封装批量使用3.封装全局指令封装输入限制输入指令//input.jsconstaddListener=function(el,type,fn){el.addEventListener(type,fn,false)}//去除空格constspaceFilter=function(el){addListener(el,'input',()=>{el.value=el.value.replace(/\s+/,'')})}//限制只能输入整数和小数（价格等级，最多两位小数）constpriceFilter=function(el){addListener(el,'input',()=>{el.value=(el.value.match(/^\d*(\.?\d{0,2})/g)[0])||nullif(isNaN(el.value)){el.value=''}})}exportdefault{bind(el,binding){if(el.tagName.toLowerCase()!=='input'){el=el.getElementsByTagName('input')[0]}spaceFilter(el)switch(binding.arg){case'price':priceFilter(el)breakdefault:console.warn('unknowndirectivetype',binding.arg)break}}}注册全局自定义指令//main.jsimportinputFilterfrom'@/directives/InputFilter.js'Vue.directive('inputFilter',inputFilter)使用v-input-filter的指令是这样封装的，使用时会有一个隐藏的bug，即在输入指令中输入超出规则限制的字符，视图中的输入框将正确显示。但是浏览器控制栏VueDevtools中testValue的最后一个字符是最后输入的字符。比如abc,123abc的输入框是,123，但是实际的testValue值是c,123c。原因是vue中绑定的值是通过监听输入来赋值的。直接修改输入框的值不会触发输入事件。需要通过dispatchEvent再次手动触发input事件。修改如下：//input.js···//defenseletdebounce=(fn,delay)=>{vardelay=delay||100;vartimer;returnfunction(){varth=this;varargs=arguments;if(timer){clearTimeout(timer);}timer=setTimeout(function(){timer=null;fn.apply(th,args);},delay);};}···//限制只能输入整数和小数(价格类，小数点后两位)constpriceFilter=function(el){addListener(el,'input',debounce(()=>{//添加防抖，防止重复触发事件导致内存溢出el.value=(el.value.match(/^\d*(\.?\d{0,2})/g)[0])||nullif(isNaN(el.value)){el.value=''}//触发输入事件el.dispatchEvent(newEvent('input'))}))}···
