封装 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