在开发过程中，基本遇到过需要限制输入的情况，比如金额，只能输入字母和数字，可以输入小数位，etc.在网上搜索了很多方法，遇到了一些坑，分享出来1.使用修饰符实现数字输入在VUE中，可以在v-modal后面加上修饰符来限制输入，例如：.number可以用来限制数字输入，但是会出现以下问题：type="number"会有自己的样式，当然可以通过添加以下css/*常见的IE浏览器样式clear*/input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none!important;}/*Firefox样式clear*/input[type="number"]{-moz-appearance:textfield;}可以输入特殊符号+-。无限期，这将导致清除数据中的值testValue。这里的修改器无法实现自定义限制输入，不能满足要求。数字，并且可以自定义限制输入内容这个方法可以满足要求，但不能封装批量使用3.封装全局指令封装输入限制输入指令//input.jsconstaddListener=function(el,type,fn){el.addEventListener(type,fn,false)}//去掉空格constspaceFilter=function(el){addListener(el,'input',()=>{el.value=el.value.replace(/s+/,'')})}//限制只能是整数和小数entered(适用于价格类别，最多两位小数)constpriceFilter=function(el){addListener(el,'input',()=>{el.value=(el.value.match(/^d*(.?d{0,2})/g)[0])||nullif(isNaN(el.value)){el.value=''}})}//只限制字母数字输入（适用于运单号）constintegerLetterFilter=function(el){addListener(el,'input',()=>{el.value=el.value.replace(/[W]/g,'')el.dispatchEvent(newEvent('input'))})}exportdefault{bind(el,binding){if(el.tagName.toLowerCase()!=='input'){el=el.getElementsByTagName('input')[0]}spaceFilter(el)switch(binding.arg){case'price':priceFilter(el)breakcase'integerLetter':integerLetterFilter(el)breakdefault:console.warn('Unknowndirectivetype',binding.arg)break}}}Registerglobalcustomdirective//main.jsimportinputFilterfrom'@/directives/InputFilter.js'Vue.directive('inputFilter',inputFilter)使用了v-input-filter指令这样在使用package的时候会有一个隐藏的bug，即在命令中输入超出正则限制的字符时，输入框在视图中显示是正确的，但是在浏览器控制栏Vue中Devtools中testValue的最后一个字符是最后输入的字符。比如在abc输入框中输入abc，123是，123，但实际的testValue值为c，123c。原因是Vue中绑定的值是通过监听输入来赋值的。直接修改输入框的值不会触发输入事件。需要通过dispatchEvent手动再次触发input事件，但是在监听的输入回调中再次触发input会死循环。于是调整监听keyup事件修改值，修改如下：//input.js···//防抖letdebounce=(fn,delay)=>{vardelay=delay||300;可变计时器；返回函数（）{varth=this;var参数=参数；如果（计时器）{clearTimeout（计时器）；}timer=setTimeout(function(){timer=null;fn.apply(th,args);},delay);};}//限制只能输入整数和小数（适用于价格，最多两位小数）constpriceFilter=function(el){addListener(el,'keyup',debounce(()=>{//Add防抖方便加小数点el.value=(el.value.match(/^d*(.?d{0,2})/g)[0])||nullif(isNaN(el.value)){el.value=''}//格式化小数点，不输入小数位el.value=+el.value//触发输入事件el.dispatchEvent(newEvent('input'))}))}//限制只能输入字母数字（适用于运单号）constintegerLetterFilter=function(el){addListener(el,'keyup',()=>{el.value=el.value.replace(/[W]/g,'')el.dispatchEvent(newEvent('input'))})}···这里就认为已经达到了要求，可以方便的使用。我希望分享它以吸引其他人并学习更好的方法。如果有更好的方法，请告诉我，谢谢！
