el-popover跳转页面不隐藏，el-popover销毁

要通过原生 JS 隐藏 el-popover 且不影响下次正常显示 ，核心是模拟组件原生关闭逻辑（而非暴力修改样式），确保仅临时隐藏弹窗，不破坏其触发机制。以下是最优实现方案：

核心思路

Element UI 的 el-popover 内置了 doClose() 方法（原生关闭逻辑），调用该方法会：

隐藏弹窗浮层；
保留组件的触发状态（hover/click 等）；
不修改组件样式，下次触发可正常显示。

相比直接设置 display: none，该方式完全遵循组件自身的生命周期，是不影响后续使用的最佳方式。

完整实现代码

javascript

运行

复制代码

/**
 * 隐藏所有 el-popover（不影响下次显示）
 * 核心：调用组件内置的 doClose() 方法，模拟原生关闭逻辑
 */
function hideAllElPopover() {
  // 1. 找到所有 el-popover 的触发容器（绑定了 Vue 实例）
  const popoverWrappers = document.querySelectorAll('.el-popover__reference-wrapper');
  
  popoverWrappers.forEach(wrapper => {
    // 2. 获取 popover 对应的 Vue 实例（Element UI 暴露的 __vue__ 属性）
    const popoverInstance = wrapper.__vue__;
    
    // 3. 调用组件原生关闭方法（仅关闭，不破坏触发逻辑）
    if (popoverInstance && typeof popoverInstance.doClose === 'function') {
      popoverInstance.doClose();
    }
  });

  // 兜底：清理极少数未通过 doClose 关闭的残留浮层（仅隐藏，不修改样式属性）
  const popoverLayers = document.querySelectorAll('.el-popover');
  popoverLayers.forEach(layer => {
    // 仅重置为组件默认的隐藏状态，而非固定设为 none
    if (layer.style.display === 'block' || layer.style.display === '') {
      layer.style.display = 'none';
    }
  });
}

/**
 * 示例：点击按钮触发关闭（Vue2 组件内使用）
 */
// 在 Vue2 组件的 methods 中
methods: {
  closePopoverWithoutAffect() {
    hideAllElPopover(); // 调用上述方法
  }
}

关键细节（保证下次正常显示）

1. 为什么不推荐直接改样式？

如果直接设置 el.style.display = 'none !important'，会强制覆盖组件样式，下次触发时组件内部的 doShow() 可能无法重置该样式，导致弹窗无法显示。而调用 doClose() 是组件自身的关闭逻辑，会：

重置组件内部的 visible 状态；
仅临时隐藏浮层，不修改核心样式；
下次 hover/click 触发时，doShow() 可正常恢复显示。

部分 el-popover 会将浮层挂载到 <body> 下（而非触发元素同级），需补充兼容逻辑：

javascript

运行

复制代码

function hideAllElPopover() {
  // 处理触发容器绑定的实例（主要逻辑）
  const popoverWrappers = document.querySelectorAll('.el-popover__reference-wrapper');
  popoverWrappers.forEach(wrapper => {
    const instance = wrapper.__vue__;
    if (instance?.doClose) instance.doClose();
  });

  // 处理 body 下的浮层（兜底，仅重置状态）
  const bodyPopovers = document.querySelectorAll('body > .el-popover');
  bodyPopovers.forEach(popover => {
    // 找到浮层对应的触发元素实例
    const triggerId = popover.getAttribute('x-placement')?.split('-')[0];
    const triggerEl = document.querySelector(`[aria-describedby="${triggerId}"]`);
    if (triggerEl?.__vue__?.doClose) {
      triggerEl.__vue__.doClose();
    } else {
      // 无实例时仅临时隐藏，不修改样式属性
      popover.style.display = 'none';
    }
  });
}

3. 测试用例（验证下次显示正常）

vue

复制代码

<template>
  <div>
    <!-- 测试 hover 弹窗 -->
    <el-popover content="测试 hover 弹窗" trigger="hover">
      <el-button slot="reference">悬浮显示</el-button>
    </el-popover>

    <!-- 测试 click 弹窗 -->
    <el-popover content="测试 click 弹窗" trigger="click">
      <el-button slot="reference">点击显示</el-button>
    </el-popover>

    <!-- 关闭按钮 -->
    <el-button type="danger" @click="closePopover">关闭所有弹窗（不影响下次显示）</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    closePopover() {
      // 调用核心关闭方法
      const popoverWrappers = document.querySelectorAll('.el-popover__reference-wrapper');
      popoverWrappers.forEach(wrapper => {
        const instance = wrapper.__vue__;
        if (instance?.doClose) instance.doClose();
      });
      // 兜底清理 body 下的浮层
      document.querySelectorAll('body > .el-popover').forEach(el => {
        el.style.display = 'none';
      });
    }
  }
};
</script>

关键注意事项

执行时机 ：必须在 el-popover 渲染完成后调用（如 mounted 钩子、点击事件中），避免在 created 中调用；
不修改核心样式 ：绝对不要给 el-popover 设置 !important 样式，仅临时设置 display: none 且下次触发时组件会自动重置；
兼容低版本 Element UI ：若 doClose() 方法不存在（极老版本），可通过重置 visibility 替代（不影响下次显示）：

javascript

运行
复制代码
```
// 兼容方案：仅修改 visibility（组件触发时会自动恢复）
el.style.visibility = 'hidden'; 
// 而非 el.style.display = 'none !important'
```
恢复显示验证：关闭后，再次 hover/click 触发元素，弹窗应正常显示，无任何卡顿。

总结

核心方案 ：找到 el-popover 的 Vue 实例，调用 doClose() 方法，这是组件原生的关闭逻辑，完全不影响下次显示；
兜底处理 ：对极少数挂载在 body 下的浮层，仅临时设置 display: none（不添加 !important），组件下次触发时会自动重置样式；
关键原则：模拟组件自身的关闭行为，而非暴力修改样式，确保触发机制不受影响。

el-popover跳转页面不隐藏，el-popover销毁

核心思路

完整实现代码

关键细节（保证下次正常显示）

1. 为什么不推荐直接改样式？

2. 针对不同挂载位置的 popover 兼容

3. 测试用例（验证下次显示正常）

关键注意事项

总结