Vue项目Element UI Popoverhover触发失效问题求助

你的代码存在两个核心问题导致Popover无法正常触发：

1. Popover与触发元素未建立关联：Element UI的Popover需要明确绑定到触发元素上，否则无法识别要监听哪个元素的hover事件。
2. 重复使用ref：你同时给Popover组件和按钮设置了popoverRef，这会导致ref指向混乱，无法完成正确的关联绑定。

修复方案 #

方法一：使用v-popover指令关联

给Popover设置唯一ref，再在触发元素上添加v-popover指令完成绑定：

<template v-else-if="column.prop == 'Documents'"> 
  <div class="Profile__historical-btn">
    <el-popover 
      ref="documentsPopover"
      trigger="hover"
      placement="left"
      width="400" 
    >
      <span>Changes cannot be applied </span>
    </el-popover>
    <!-- 若要hover span触发Popover -->
    <span v-popover:documentsPopover>yes</span>
    <!-- 若要按钮触发：disabled按钮无法触发鼠标事件，需包裹一层父元素绑定 -->
    <div v-popover:documentsPopover v-if="editP">
      <button disabled class="AccProfile__btnDiv" @click="open(row)">
        <svg-icon icon="edit" width="14px" height="12px"/>
      </button>
    </div>
  </div>
</template>

方法二：使用target属性指定触发元素

给触发元素设置独立的ID，再通过Popover的target属性指定该ID：

<template v-else-if="column.prop == 'Documents'"> 
  <div class="Profile__historical-btn">
    <el-popover 
      trigger="hover"
      placement="left"
      width="400" 
      target="documentTrigger"
    >
      <span>Changes cannot be applied </span>
    </el-popover>
    <span>yes</span>
    <div v-if="editP">
      <button id="documentTrigger" disabled class="AccProfile__btnDiv" @click="open(row)">
        <svg-icon icon="edit" width="14px" height="12px"/>
      </button>
    </div>
  </div>
</template>

额外注意事项 #

• 处于disabled状态的button会被浏览器禁用鼠标事件（包括hover），必须将其包裹在父元素中，给父元素绑定Popover触发逻辑。
• 确保你的Element UI版本为最新稳定版，旧版本可能存在Popover的兼容性问题。

内容的提问来源于stack exchange，提问作者Neeza