vue中的自定义指令clickOutside

发布时间:2023-09-24 11:00

目录
  • 自定义指令clickOutside
    • 首先我们先看看vue官方的文档
    • clickoutside 这个指令用在哪里呢?
    • 写法
  • 自定义指令clickoutside使用及扩展用法

    自定义指令clickOutside

    这个指令通过vue的自定义指令的钩子函数实现。

    首先我们先看看vue官方的文档

    \"vue中的自定义指令clickOutside_第1张图片\"

    emmmm 看着好像有点困难,没关系官方文档也给出了例子。

    \"vue中的自定义指令clickOutside_第2张图片\"

    \"vue中的自定义指令clickOutside_第3张图片\"

    现在应该就明白了不少了吧。

    clickoutside 这个指令用在哪里呢?

    比如

    \"vue中的自定义指令clickOutside_第4张图片\"

    写法

    export default {
        bind (el, binding, vnode) {
            function documentHandler (e) {
            // el 包含其触发的元素 那当然不能触发啦
                if (el.contains(e.target)) {
                    return false;
                }
                // 满足上面条件, 并且expression 的值不为空 触发(希望value是个函数)
                if (binding.expression) {
                	//	调用自定义指令传来的函数,e是事件原对象 作为参数(为什么传e 因为有些情况需要把这个对象抛出方便用户的操作)
                    binding.value(e);
                }
            }
            // 嗯??? 这么写有什么作用吗? 当然有了,如果你想取消事件的监听,那么是不是需要这个函数。
            el.__vueClickOutside__ = documentHandler;
            // 在document上监听事件
            document.addEventListener(\'click\', documentHandler);
        },
        update () {
        },
        unbind (el, binding) {
        // 取消事件监听(el.__vueClickOutside 派上用场了吧)
            document.removeEventListener(\'click\', el.__vueClickOutside__);
            // 既然都取消了 那么这个属性就没必要存在了
            delete el.__vueClickOutside__;
        }
    };
    

    下拉框组件上的引用

    \"vue中的自定义指令clickOutside_第5张图片\"

    \"vue中的自定义指令clickOutside_第6张图片\"

    呐 大功告成!!! 

    自定义指令clickoutside使用及扩展用法

    以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

    ItVuer - 免责声明 - 关于我们 - 联系我们

    本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

    桂ICP备16001015号