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`中分别判断点击目标是否在各自弹出框内部。