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>