Vue3实现带点击外部关闭对应弹出框（可共用一个变量）

首先，假设您在单文件组件(SFC)中使用了Vue3，并且有两个div元素分别通过`v-if`和`v-else`来切换显示一个带有`.elpopver`类的弹出组件。在这种情况下，每个弹出组件应当拥有独立的状态管理（例如：各自的isOpen变量）。为了实现点击外部关闭对应弹出框的功能，我们需要为每个组件实例绑定唯一的标识并更新事件处理函数。

// 假设你的组件有如下结构
<template><div v-if="showFirst"><div class="elpopver" ref="firstPopover"><!-- 第一个弹出框的内容 --></div></div><div v-else><div class="elpopver" ref="secondPopover"><!-- 第二个弹出框的内容 --></div></div>
</template><script setup>
import { onMounted, onUnmounted, ref } from 'vue';const showFirst = ref(true);
// 可以共用一个组件弹出框，共用一值
const isOpenFirst = ref(false);
const isOpenSecond = ref(false);const firstPopover = ref(null);
const secondPopover = ref(null);onMounted(() => {document.addEventListener('click', closePopup);
});onUnmounted(() => {document.removeEventListener('click', closePopup);
});function closePopup(e) {if (firstPopover.value && !firstPopover.value.contains(e.target)) {isOpenFirst.value = false;}if (secondPopover.value && !secondPopover.value.contains(e.target)) {isOpenSecond.value = false;}
}// 根据需要在其他地方控制 isOpenFirst 和 isOpenSecond 的值以显示/隐藏弹出框
</script>

这里我们利用Vue的`ref`特性获取到两个弹出框的DOM元素，并在事件处理函数`closePopup`中分别判断点击目标是否在各自弹出框内部。