自定义指令过滤特殊符号、字符或关键字
基于vue和elementUI自定义指令过滤特殊符号、字符或关键字,你可以去创建单独的文件去暴露,然后引入到main.js里,为了方便我就直接写在main.js里了,直接看代码1. 定义指令Vue.directive('specialString', {update: function (el, { value, modifiers }, vnode) {try {// 此处可以debug看看el
·
基于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>
更多推荐
已为社区贡献5条内容
所有评论(0)