vue自定义指令-点击元素外部

紫微前端

于 2022-05-18 16:02:36 发布

阅读量798

点赞数

CC 4.0 BY-SA版权

分类专栏：常用代码片段文章标签： vue.js elementui javascript

本文链接：https://blog.youkuaiyun.com/liuhao9999/article/details/124844623

常用代码片段专栏收录该内容

168 篇文章 ¥39.90 ¥99.00

订阅专栏

本文详细探讨了在Vue中如何创建一个自定义指令，用于监听并响应除指定元素之外的任何地方的点击事件。通过这个自定义指令，可以实现组件的收起、隐藏等效果，提高用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue.directive('clickOutside', {
    beforeMount (el, binding, vnode) {
        function documentHandler (e) {
            if (el.contains(e.target)) {
                return false;
            }
            binding.value(e);
        }
        el.__vueClickOutside__ = documentHandler;
        document.addEventListener('click', documentHandler);
    },
    unmounted (el, binding) {
        document.removeEventListener('click', el.__vueClickOutside__);
        delete el.__vueClickOutside__;
    }
});