在開發過程中，我們基本上都遇到過需要限制輸入的情況，比如金額，只能輸入字母數字字符，可以輸入的小數位數等等。網上搜了很多方法，遇到了一些漏洞，分享一下。
1.使用修飾符輸入數字。
在VUE，您可以在v-modal后面添加修飾語來限制輸入，例如:
數字可以限制數字輸入，但它有以下問題:
會出現type=””自帶樣式，當然可以通過添加以下css清除/* 普通IE瀏覽器 樣式清除 */input::--outer-spin-,input::--inner-spin-{--: none !;}/* 火狐瀏覽器樣式清除 */input[type=""]{-moz-:;}可以無限輸入特殊符號+-.，會導致清空data中的值 這里的修飾符也無法實現定制限制輸入，不能滿足要求2。監控輸入框的變化
通過@input監控更新的數據，做到只能輸入數字，可以自己自定義和限制輸入內容。
這種方法可以滿足要求，但不能打包批量使用。
3。封裝全局指令
封裝輸入限制輸入指令。
//input. = (el, type, fn) { el.(type, fn, false)}//去掉空格const = (el) { (el, 'input', () => { el.value = el.value.(/s+/, '') })}// 限制只能輸入整數和小數（價格類、最多兩位小數）const = (el) { (el, 'input', () => { el.value = (el.value.match(/^d*(.?d{0,2})/g)[0]) || null if (isNaN(el.value)) {el.value = '' } })} { bind(el, ) { if (el..() !== 'input') {el = el.('input')[0] } (el) (.arg) {case 'price':(el):.warn('未知指令類型',.arg)break } }}
注冊全局自定義指令
//main. from '@//.js'Vue.('', )
使用v-輸入-過濾命令
這樣在使用封裝時會有一個隱藏的bug，就是當輸入指令中常規限制以外的字符時，視圖中的輸入框顯示正確，但瀏覽器控制欄Vue 中的最后一個字符是最后輸入的字符。
例如，如果輸入abc，，輸入框是，123，但實際的測試值是C，123c。
原因是vue中的綁定值是由監控輸入賦值的，直接修改輸入框值不會觸發輸入事件，所以需要通過再次手動觸發輸入事件文本出現代碼怎么辦，修改如下:
//input.js···// 防抖let = (fn, delay) => { var delay = delay || 100; var timer; () { var th = this; var args = ; if (timer) {(timer); } timer = (() {timer = null;fn.apply(th, args); }, delay); };}···// 限制只能輸入整數和小數（價格類、兩位小數）const = (el) { (el, 'input', (() => {//添加防抖 防止反復觸發事件導致內存溢出 el.value = (el.value.match(/^d*(.?d{0,2})/g)[0]) || null if (isNaN(el.value)) {el.value = '' } //觸發input事件 el.(new Event('input')) }))}···
在這里也算是符合要求了，用起來也很方便。希望分享出來能提供一些有價值的建議，學習更好的方法。如果有更好的方法文本出現代碼怎么辦，請告訴我。謝謝大家！