H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【element-ui】vue注册一个全局自定义指令 `不允许输入空格&*%等特殊字符`

用的element UI ,想注册一个全局指令,在网上找到一个列子,但是发现加上clearable后 点击无效,研究了好久没答案,实属无奈上来发问

<!DOCTYPE html>
<html>
    <head>
        <title>vue实时过滤空格&*%等特殊字符用法</title>
    </head>
    <body>
        <div id="app">
            <el-input type="text" v-model="name" v-filter-special-char clearable> </el-input>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

        <script type="text/javascript">
            // 注册一个全局自定义指令 `不允许输入空格&*%等特殊字符`
                Vue.directive('filterSpecialChar', {
                        update: function (el, { value, modifiers }, vnode) {
                                try {
                                     
                                        if(!el.children[0].value){
                                           return false; 
                                         }
                                        el.children[0].value = el.children[0].value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g, "");
                                        el.children[0].dispatchEvent(new Event(modifiers.lazy ? 'change' : 'input'))
                                } catch (e) {
                                }
                        }
                })
            var app = new Vue({
                el: '#app',
                data:{
                    name:''
                } 
            });
        </script>
    </body>
</html>

原文链接https://www.jianshu.com/p/2f8…

回答:

主要原因是重复绑定了,v-model的值与指令中的el.children[0].value重复导致的。

这里clearable点击无效不是点击后真的没反应,而是看着没反应,其实他做了以下反应:
1、设置name值为空字符串
2、更新指令,此时input的value是有值的,所以运行后面的dispatchEvent
3、input事件处理,绑定name值为input的value
4、更新组件,再次运行update,从而再次运行后面的dispatchEvent
5、input事件处理,绑定name值为input的value,因为和上一次的值相等,所以不更新组件,渲染结束


那么你这里怎么修改呢,其实可以把name的值传入指令中,根据这个值来处理数据,因为这个值是动态变化的,就代表了input的值。这里只是提供一个思路,还有其他解决方法,你可以思考下

Vue.directive('filterSpecialChar', {
  update: function (el, {value, modifiers}, vnode) {
    try {
      let newval = value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g, "");
      if(value !== newval){
        el.children[0].value = newval
        el.children[0].dispatchEvent(new Event(modifiers.lazy ? 'change' : 'input'))
      }
    } catch (e) {
      console.log(e)
    }
  }
})

指令绑定:
v-filter-special-char="name"

本文地址:H5W3 » 【element-ui】vue注册一个全局自定义指令 `不允许输入空格&*%等特殊字符`

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址