Vue自定义正则指令全局限制Input框禁止输入特殊符号

Vue里如何使用自定义指令全局限制input特殊符号呢？直接上代码

1. input_rules.js文件里

let findEle = (parent, type) => {
  return parent.tagName.toLowerCase() === type ? parent : parent.querySelector(type)
}

const trigger = (el, type) => {
  const e = document.createEvent('HTMLEvents')
  e.initEvent(type, true, true)
  el.dispatchEvent(e)
}

const emoji = {
  bind: function (el, binding, vnode) {
    // 正则规则可根据需求自定义
    // var pattern = new RegExp("[`~!@#$^&*()=|{}:;,\\[\\].<>?~！@#￥……&*（）——|{}【】‘；：”“。，、？]+/g")
    var str= /[`~!@#$%^&*\+=<>?:"{}|,\;\\[\]·~！@#￥%&*——\+={}|《》？：“”【】、；‘，。、]/ig; 
    let $inp = findEle(el, 'input')
    el.$inp = $inp
    $inp.handle = function () {
      let val = $inp.value
      $inp.value = val.replace(str, '')
      trigger($inp, 'input')
    }
    $inp.addEventListener('keyup', $inp.handle)
  },
  unbind: function (el) {
    el.$inp.removeEventListener('keyup', el.$inp.handle)
  },
}

export default emoji

2.在main.js文件中引入input_rules.js文件

import emoji from '@/utils/input_rules';

3.使用Vue.directive全局注册指令

Vue.directive('emoji', emoji)

4.代码中使用