vue3解决点击元素之外执行某种操作

最新推荐文章于 2025-11-07 16:13:09 发布

原创最新推荐文章于 2025-11-07 16:13:09 发布 · 725 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

文章介绍了如何在Vue应用中使用`clickOut`指令，通过beforeMount钩子添加文档点击事件监听器，当点击事件不在指定元素内部时，执行预设的方法。v-click-out=fn用于在元素上绑定该功能。

使用指令的方式

app.directive('clickOut', {
    beforeMount(el, binding) {
        el.clickOutsideEvent = e => {
            if(!(el === event.target || el.contains(event.target)) {
                binding.value(e); // 执行绑定的方法
            }
        }
        document.addEventListener("click", el.clickOutsideEvent);
    },
    
    unmounted() {
        document.removeEventListener("click", el.clickOutsideEvent);
    }
})

v-click-out = 'fn'的方式绑定在元素上即可