基于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>

Logo

前往低代码交流专区

更多推荐