封裝 v-vue-onkeypress 指令

在開發項目的過程當中，遇到一個常見的需求，輸入框只能輸入數字，最開始的時候是這樣寫的

後發現不兼容火狐瀏覽器，因而修改爲

經測試，沒有問題了，因爲使用的地方較多，便萌生了封裝一個指令的想法，代碼以下

onkeypress.js

import {checkNumber} from '../../utils/util'

export default {
  bind: function (el,binding) {
    el.onkeypress = function(e){
      return checkNumber(e)
    }
  }
}

驗證數字函數 util.js

export function checkNumber(e) {
  let ev = e || event;
  return (/[\d]/.test(String.fromCharCode(ev.keyCode || ev.which))) || ev.which === 8
}

index.js

import VueOnkeypress from './onkeypress.js'

const install = function(Vue) {
  Vue.directive('VueOnkeypress', VueOnkeypress)
}

if (window.Vue) {
  window.VueOnkeypress = VueOnkeypress
  Vue.use(install);
}

VueOnkeypress.install = install
export default VueOnkeypress

最後在main.js註冊全局指令

import VueOnkeypress from 'src/directive/onkeypress/index'


Vue.directive('VueOnkeypress', VueOnkeypress);

而後就闊以使用了

end