自定义指令过滤特殊符号、字符或关键字

基于vue和elementUI的el-input组件自定义指令过滤特殊符号、字符或关键字，原理也不算过滤，其实你仔细看代码也能看明白，是把关键字替换成空字符，代码你可以去创建单独的文件去暴露，然后引入到main.js里，为了方便我就直接写在main.js里了，直接看代码

1. 定义指令

Vue.directive('specialString', {
  update: function (el, { value, modifiers }, vnode) {
    try {
      // 此处可以debug看看el具体值是什么,这里演示的是原生控件input,如果是使用element中的<el-input />标签,需要通过 el.children[0] 拿到原生input.
      if (!el.children[0].value) {
        return false;
      }
      el.children[0].value = value
      var pattern = new RegExp("[`~!@#$^&*()=|{}';',\\[\\]<>?~！@#￥……&*（）%——|{}【】※‘；+- ‘’.”“'。，、？]")
      el.children[0].value = el.children[0].value.replace(pattern, '')
      el.children[0].dispatchEvent(new Event(modifiers.lazy ? 'change' : 'input'))
    } catch (e) {
      console.log(e)
    }
  }
})

2. 注册指令    

Vue.use(specialString)

3. 使用

       <el-form-item label="名称:" prop="pubName" v-specialString="gnssForm.pubName">
              <el-input
                v-model.trim="gnssForm.pubName"
                placeholder="请输入名称"
              ></el-input>
            </el-form-item>