在開發過程中，基本都遇到過需要限制輸入的情況，比如金額、僅字母數字、可輸入小數位等，網上搜了很多方法也遇到一些坑，所以分享出來。
1。使用修飾符實現數字輸入
在VUE中可以在v-modal後新增修飾符的形式來限制輸入，比如：
。number可以實現限制數字輸入，但是會有以下問題：
會出現type=“number”自帶樣式，當然可以透過新增以下css清除
/* 普通IE瀏覽器 樣式清除 */input：：-webkit-outer-spin-button，input：：-webkit-inner-spin-button{-webkit-appearance： none ！important；}/* 火狐瀏覽器樣式清除 */input［type=“number”］{-moz-appearance：textfield；}
可以無限輸入特殊符號+-。，會導致清空data中的值testValue 這裡的修飾符也無法實現定製限制輸入，不能滿足要求
2.監聽輸入框變化
透過@input監聽更新資料，實現只能輸入數字，而且可以自行定製限制輸入內容
此方法可以滿足需求，但是無法封裝進行批次使用
3.封裝全域性指令
封裝input限制輸入指令
//input。jsconst addListener = function（el， type， fn） { el。addEventListener（type， fn， false）}//去掉空格const spaceFilter = function（el） { addListener（el， ‘input’， （） => { el。value = el。value。replace（/\s+/， ‘’） }）}// 限制只能輸入整數和小數（價格類、最多兩位小數）const priceFilter = function（el） { addListener（el， ‘input’， （） => { el。value = （el。value。match（/^\d*（\。？\d{0，2}）/g）［0］） || null if （isNaN（el。value）） { el。value = ‘’ } }）}export default { bind（el， binding） { if （el。tagName。toLowerCase（） ！== ‘input’） { el = el。getElementsByTagName（‘input’）［0］ } spaceFilter（el） switch （binding。arg） { case ‘price’： priceFilter（el） break default： console。warn（‘未知指令型別’，binding。arg） break } }}
註冊全域性自定義指令
//main。jsimport inputFilter from ‘@/directives/InputFilter。js’Vue。directive（‘inputFilter’， inputFilter）
使用v-input-filter指令
這樣封裝在使用時會出現一個隱蔽的bug，就是在輸入指令中正則限制以外的字元時，檢視中輸入框顯示是正確的，但是在瀏覽器控制欄Vue Devtools中的testValue最後一位字元是最後輸入的時的字元。
比如輸入abc、123abc輸入框內是 、123，但實際testValue值是c、123c。
原因是vue中繫結的值是透過監聽input進行賦值的，直接修改輸入框值不會觸發input事件，需要透過dispatchEvent再次手動觸發input事件，修改如下：
//input。js···// 防抖let debounce = （fn， delay） => { var delay = delay || 100； var timer； return function（） { var th = this； var args = arguments； if （timer） { clearTimeout（timer）； } timer = setTimeout（function（） { timer = null； fn。apply（th， args）； }， delay）； }；}···// 限制只能輸入整數和小數（價格類、兩位小數）const priceFilter = function（el） { addListener（el， ‘input’， debounce（（） => {//新增防抖 防止反覆觸發事件導致記憶體溢位 el。value = （el。value。match（/^\d*（\。？\d{0，2}）/g）［0］） || null if （isNaN（el。value）） { el。value = ‘’ } //觸發input事件 el。dispatchEvent（new Event（‘input’）） }））}···
到這裡算是滿足了要求，也能方便的使用，分享出來希望能夠拋磚引玉，學習到更好的方式，如果有更好的方法請告訴我，謝謝！
