vue3 点击空白处关闭弹框

你可以在 vue3 中使用 @clickoutside 指令来实现点击空白处关闭弹框的功能。具体步骤如下：

1. 在需要关闭的组件上绑定 v-clickoutside 指令：例如 <div v-clickoutside="close">...</div>

2. 在组件的 methods 中定义 close 函数，该函数将在点击空白处调用，来关闭弹框。

3. 在组件的 directives 属性中注册 clickoutside 指令的实现代码，例如：

directives: {
clickoutside: {
bind: function(el, binding, vnode) {
el.clickOutsideEvent = function(event) {
if (!(el == event.target || el.contains(event.target))) {
vnode.context[binding.expression](event);
}
};
document.body.addEventListener("click", el.clickOutsideEvent);
},
unbind: function(el) {
document.body.removeEventListener("click", el.clickOutsideEvent);
},
},
}

注意：使用 @clickoutside 指令前需要在 main.js 中引入指令。