[[343734]]

1.使用修飾符實現數字輸入
在VUE中可以在v-modal后添加修飾符的形式來限制輸入，比如：

<input v-model.number="testValue" type="number"> 

 .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監聽更新數據，實現只能輸入數字，而且可以自行定制限制輸入內容

<input v-model="testValue" @input="testValue = testValue.replace(/[^\d]/g,'')"> 

此方法可以滿足需求，但是無法封裝進行批量使用

3.封裝全局指令
封裝input限制輸入指令

//input.js 
 
const 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.js 
 
import inputFilter from '@/directives/InputFilter.js' 
 
Vue.directive('inputFilter', inputFilter) 

使用v-input-filter指令

<input v-modal="testValue" v-input-filter:price> 

這樣封裝在使用時會出現一個隱蔽的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')) 
  })) 
} 
 
···