如何获取Element-Plus中el-popover的根DOM元素？解决外部点击关闭异常

问题背景 #

在Vue项目中使用Element-Plus的el-popover组件实现弹出效果，代码如下：

<el-button ref="saveButtonRef" class="misc-button" :loading="saveLoading" @click="OnSheetSave">Save</el-button>
<el-popover ref="savePopoverRef" :virtual-ref="saveButtonRef" :visible="showSaveList" placement="top-start" :width="500" virtual-triggering>
...el-popover Content...
</el-popover>

为实现点击按钮和弹出框外部时关闭弹出框，添加了以下事件监听：

document.addEventListener('click', handleClickPopoverOutside);
function handleClickPopoverOutside(event) {
    if (showSaveList.value) {
        const buttonElement = saveButtonRef.value.$el;
        const popoverElement = savePopoverRef.value.$el;
        if (buttonElement && !buttonElement.contains(event.target) && popoverElement && !popoverElement.contains(event.target)) {
            OnSaveSheetPoPoverClose();     // Close Popover Instance
        }
    }
}

但点击弹出框内部时仍会触发关闭逻辑，原因是savePopoverRef.value.$el返回的是#text节点，而非弹出框的真实DOM容器。同时要求不能修改virtual-ref属性，避免影响现有逻辑。

解决方案 #

方法一：正确获取弹出框的真实DOM容器 #

el-popover的实际弹出层DOM是挂载在body下的独立元素，组件实例的popperRef属性指向弹出层的容器组件，通过它可以获取真实DOM：

document.addEventListener('click', handleClickPopoverOutside);
function handleClickPopoverOutside(event) {
    if (!showSaveList.value) return;

    const buttonEl = saveButtonRef.value?.$el;
    const popoverContainer = savePopoverRef.value?.popperRef?.$el;
    const popoverArrow = savePopoverRef.value?.popperRef?.arrowRef?.$el;

    // 判断点击是否在按钮内
    const isInButton = buttonEl?.contains(event.target);
    // 判断点击是否在弹出框容器或箭头内
    const isInPopover = popoverContainer?.contains(event.target) || popoverArrow?.contains(event.target);

    if (!isInButton && !isInPopover) {
        OnSaveSheetPoPoverClose();
    }
}

// 组件卸载时移除监听，防止内存泄漏
onUnmounted(() => {
    document.removeEventListener('click', handleClickPopoverOutside);
});

方法二：使用Element-Plus自带的auto-close属性（推荐） #

Element-Plus的el-popover内置了auto-close属性，可直接配置点击外部关闭，无需手动编写事件监听：

<el-popover 
    ref="savePopoverRef" 
    :virtual-ref="saveButtonRef" 
    :visible="showSaveList" 
    placement="top-start" 
    :width="500" 
    virtual-triggering
    auto-close="outside"
>
...el-popover Content...
</el-popover>

auto-close的可选值说明：

• 'outside': 仅点击外部区域时关闭
• 'inside': 仅点击内部区域时关闭
• true: 点击内部或外部都关闭
• false: 禁用自动关闭

这种方式无需手动操作DOM，更契合组件设计，也能规避DOM结构变化带来的兼容问题。

内容的提问来源于stack exchange，提问作者Mercer-L