VUE_vue2/3点击区域外触发方法，点击除某个元素触发监听

Vue2

1、自定义指令

// 自定义指令，用于处理点击外部区域的事件
const clickOutside = {bind(el, binding) {// 在元素上绑定一个点击事件监听器el.clickOutsideEvent = function (event) {// 检查点击事件是否发生在元素的内部if (!(el === event.target || el.contains(event.target))) {// 如果点击事件发生在元素的外部，则触发指令绑定的方法binding.value(event);}};// 在文档上添加点击事件监听器document.addEventListener("click", el.clickOutsideEvent);},unbind(el) {// 在元素上解除点击事件监听器document.removeEventListener("click", el.clickOutsideEvent);},
}

2、注册自定义指令

export default{directives: {"click-outside": clickOutside, // 注册自定义指令},
}

示例

<template><div class="container"><div v-click-outside="handleBlur">当点击该元素以外的地方时，将触发handleBlur方法</div></div>
</template>
<script>
// 自定义指令，用于处理点击外部区域的事件
const clickOutside = {bind(el, binding) {// 在元素上绑定一个点击事件监听器el.clickOutsideEvent = function (event) {// 检查点击事件是否发生在元素的内部if (!(el === event.target || el.contains(event.target))) {// 如果点击事件发生在元素的外部，则触发指令绑定的方法,将点击的event数据传过去binding.value(event);}};// 在文档上添加点击事件监听器document.addEventListener("click", el.clickOutsideEvent);},unbind(el) {// 在元素上解除点击事件监听器document.removeEventListener("click", el.clickOutsideEvent);},
};
export default {directives: {"click-outside": clickOutside, // 注册自定义指令},name: "test",data() {return {};},methods: {//点击其它区域handleBlur(event) {console.log("点击其它区域啦",event);},}
}
</script>

此时，点击绑定该方法外的区域就会触发该方法啦。不用再用原生单独一个个绑定了

Vue3

因为在 Vue 3 的自定义指令中，生命周期钩子函数的命名和用法已经发生了变化。Vue 3 引入了新的生命周期钩子函数，取代了 Vue 2 中的 bind 和 unbind，所以自定义指令部分v3和v2的写法不一样。下面是v3的自定义指令部分，和v3的整体代码。

当前示例为选项式api，组合式api方式相同

1、自定义指令

// 自定义指令，用于处理点击外部区域的事件
const clickOutside = {beforeMount(el, binding) {// 在元素上绑定一个事件监听器el.clickOutsideEvent = function (event) {// 判断点击事件是否发生在元素外部if (!(el === event.target || el.contains(event.target))) {// 如果是外部点击，则执行绑定的函数binding.value(event);}};// 在全局添加点击事件监听器document.addEventListener("click", el.clickOutsideEvent);},unmounted(el) {// 在组件销毁前，移除事件监听器以避免内存泄漏document.removeEventListener("click", el.clickOutsideEvent);},
}

2、注册自定义指令

export default{directives: {"click-outside": clickOutside, // 注册自定义指令},
}

示例

<template><div class="container"><div v-click-outside="handleBlur">当点击该元素以外的地方时，将触发handleBlur方法</div></div>
</template><script>
// 自定义指令，用于处理点击外部区域的事件
const clickOutside = {beforeMount(el, binding) {// 在元素上绑定一个事件监听器el.clickOutsideEvent = function (event) {// 判断点击事件是否发生在元素外部if (!(el === event.target || el.contains(event.target))) {// 如果是外部点击，则执行绑定的函数binding.value(event);}};// 在全局添加点击事件监听器document.addEventListener("click", el.clickOutsideEvent);},unmounted(el) {// 在组件销毁前，移除事件监听器以避免内存泄漏document.removeEventListener("click", el.clickOutsideEvent);},
}
export default {directives: {"click-outside": clickOutside, // 注册自定义指令},name: "test",data() {return {};},methods: {//点击其它区域handleBlur(event) {console.log("点击其它区域啦", event);},},
}
</script>