在开发过程中，基本遇到过需要限制输入格式的情况，比如金额，只能是字母数字，小数位可以entered等，在网上搜索了很多方法也遇到了一些坑，所以分享出来。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浏览器样式清晰*/input[type="number"]{-moz-appearance:textfield;}可以不限输入特殊符号+-。将清除数据中的值。这里的修改器无法实现自定义限制输入，不能满足要求。2.监听输入框的变化，通过@input监听更新数据，这样只能输入数字，可以自定义限制输入内容这个方法可以满足要求，但是不能打包批量使用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])||null如果(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('unknowncommandtype',binding.arg)break}}}注册全局自定义指令//main.jsimportinputFilterfrom'@/directives/InputFilter.js'Vue.directive('inputFilter',inputFilter)usev-input-filterdirective这个封装会有一个隐藏使用时的bug，即在命令中输入超出常规限制的字符时，视图中的输入框显示正确，但在浏览器控制栏中VueDevtoolstestValue的最后一个字符是最后输入的字符。比如在abc输入框输入abc,123,123，但实际的testValue值为c,123c。原因是vue中绑定的值是通过监听输入来赋值的。直接修改输入框的值不会触发输入事件。需要通过dispatchEvent再次手动触发input事件。修改如下：//input.js···//letdebounce=(fn,delay)=>{vardelay=delay||100；可变计时器；返回函数（）{varth=this;var参数=参数；如果（计时器）{clearTimeout（计时器）；}timer=setTimeout(function(){timer=null;fn.apply(th,args);},delay);};}···//限制只能输入整数和小数（价格等级，小数点后两位）constpriceFilter=function(el){addListener(el,'input',debounce(()=>{//Add防抖防止重复触发事件导致内存溢出el.value=(el.value.match(/^d*(.?d{0,2})/g)[0])||null
