本文共 1266 字，大约阅读时间需要 4 分钟。

在Vue.js项目中，遇到嵌套弹窗（popover）的显示与关闭问题时，尤其是父级和子级弹窗无法协调关闭的情况，这可能是由于弹窗层级混淆导致的。以下是解决这个问题的详细方法。

1. 给嵌套的弹窗添加唯一引用

由于子级弹窗是动态生成的，因此可以在父级弹窗中为每个子级弹窗添加唯一的ref。这样在控制子级弹窗时，可以通过引用来区分不同层级的弹窗。

// 假设SubComponent中有一个el-popover循环生成
   
  
    
   

2. 传递索引参数来控制弹窗关闭

在显示子级弹窗时，可以通过回调传递索引参数，以便在关闭时确定是哪个弹窗需要关闭。

// 父级弹窗的显示回调中添加索引
showPopover(index) {
  // 当前显示的子级弹窗索引
  this.$root.currentIndex = index;
}

3. 在点击事件中关闭所有弹窗

为确保在点击其他区域时，所有弹窗都会关闭，可以在点击事件中调用doClose方法，并传递索引以控制具体弹窗的关闭。

// 定义点击事件处理函数
tableTwoPopoverClick() {
  // 获取所有弹窗引用
  let eleList = this.$refs.earlyPop;
  let eleList1 = this.$refs.warnyPop;
  
  // 调用每个弹窗的doClose方法
  eleList.forEach((i, j) => {
    if (j === this.$root.currentIndex) {
      i.doClose();
    } else {
      i.doClose();
    }
  });
  eleList1.forEach((i, j) => {
    if (j === this.$root.currentIndex) {
      i.doClose();
    } else {
      i.doClose();
    }
  });
}

4. 在页面最外层添加点击事件

为了在点击页面外部区域时关闭当前显示的弹窗，可以在页面的最外层div中添加点击事件，并设置事件冒泡为 STOP。

   
  
    
   
// 定义事件处理函数
handleClick() {
  this.$root.currentIndex = null;
}

5. 防止事件冒泡干扰

在关闭弹窗时，为避免影响其他层级的弹窗显示，确保事件冒泡被停止。

doClose() {
  //ypassThroughEvents
  var e = window.event || arguments.callee.caller.arguments[0];
  e.stopPropagation();
}

总结

通过以上方法，可以有效地控制嵌套弹窗的显示和关闭，确保父级弹窗在子级弹窗显示时不会自动关闭，点击外部区域时弹窗能够正确关闭，并且避免事件冒泡影响用户体验。