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

这篇具有很好参考价值的文章主要介绍了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`中分别判断点击目标是否在各自弹出框内部。文章来源地址https://www.toymoban.com/news/detail-802589.html

到了这里，关于Vue3实现带点击外部关闭对应弹出框（可共用一个变量）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！