作者：Sinea来源：segmentfault.com/a/1190000024563195转载请注明出处，谢谢?(?ω?)?在开发过程中，基本遇到了需要限制输入的情况，比如金额，只能输入字母数字，小数位等，在网上搜索了很多方法，遇到了一些坑，所以分享一下1.使用修饰符实现数字输入。在VUE中，可以在v-model字符后面加上修饰符来限制输入，例如：.number可以实现数字输入的限制，但是会有会出现以下问题：会出现自带样式的type="number"，当然可以通过添加如下css来清除/*普通IE浏览器样式清除*/input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none!important;}/*Firefox浏览器样式清晰*/input[type="number"]{-moz-appearance:textfield;}你可以输入特殊符号+-。无限期地，这将导致数据中的值被清除。这里的修饰符也是Unabletoachievecustomlimitinput，达不到要求2.监听输入框的变化通过@input监听更新数据，实现只能输入数字，可以自定义限制输入自己内容这个方法可以满足要求，但是不能封装batch使用3.封装全局指令封装input限制输入指令//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=''}})}//仅限字母数字输入（适用于运单号）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命令这个封装在使用的时候会有一个隐藏的bug，就是在命令中输入超出常规限制的字符时，视图中的输入框显示正确，但是浏览器控制栏中的最后一个testValueVueDevtools位字符是最后输入的字符。比如在abc输入框输入abc,123,123，但实际的testValue值为c,123c。原因是Vue中绑定的值是通过监听输入来赋值的。直接修改输入框的值不会触发输入事件。需要通过dispatchEvent手动再次触发input事件，但是在监听的输入回调中再次触发input会死循环。于是调整监听keyup事件修改值，修改如下：//input.js···//防抖letdebounce=(fn,delay=300)=>{vartimer;返回函数（）{varth=this;var参数=参数；如果（计时器）{clearTimeout（计时器）；}timer=setTimeout(function(){timer=null;fn.apply(th,args);},delay);};}//limitonly可以输入整数和小数（适用于价格类别，最多两位小数）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'))}))}//只限制字母Number(forwaybillnumber)constintegerLetterFilter=function(el){addListener(el,'keyup',()=>{el.value=el.value.replace(/[\W]/g,'')el.dispatchEvent(newEvent('input'))})}···这里的要求满足了，方便使用它并分享它，希望能够启发他人并学习更好的方法。如果有更好的方法，请告诉我，谢谢！
