【Vue】自定义指令 - 点击当前区域外

<template><div><div v-click-outside="onClickOutside" class="box">点击内容外区域会触发事件</div></div>
</template><script setup>
// 定义自定义指令 v-click-outside
const vClickOutside = {mounted(el, binding) {function eventHandler(e) {if (el.contains(e.target)) {return false}// 如果绑定的参数是函数，则执行if (binding.value && typeof binding.value === "function") {binding.value(e)}}// 用于销毁前注销事件监听el.__click_outside__ = eventHandler// 添加事件监听document.addEventListener("click", eventHandler)},beforeUnmount(el) {// 移除事件监听document.removeEventListener("click", el.__click_outside__)// 删除无用属性delete el.__click_outside__},
}// 定义点击外部区域的处理函数
const onClickOutside = () => {console.log("点击了外部 DOM")
}
</script><style scoped>
.box {width: 200px;height: 200px;background-color: lightblue;text-align: center;line-height: 200px;
}
</style>