el-popover 初始弹出位置不准确，及el-popover

最新推荐文章于 2025-05-07 18:15:06 发布

Andy_17

最新推荐文章于 2025-05-07 18:15:06 发布

阅读量4k

点赞数

CC 4.0 BY-SA版权

分类专栏： element 文章标签： javascript vue.js 前端 elementui

本文链接：https://blog.csdn.net/Andy_17/article/details/124926422

element 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了在Vue项目中遇到el-popover组件弹出提示位置不正确的问题及其解决方案。问题主要涉及初始化位置和数据动态加载后的位置调整。解决方案包括：为嵌套Table设置高度、在数据加载后调用`updatePopper()`方法重新计算位置、调整`open-delay`属性以避免闪烁，以及设置`popper-options`的`boundariesElement`以防止定位超出视口。这些方法有助于确保el-popover在各种情况下的正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述

使用el-popover 弹窗框，弹出提示，初始化提示位置不正确

<el-popover
                ref="popperHeart"
                placement="bottom"
                width="720"
                trigger="click">
                <div class="help-tips">
                  <div class="help-tips-title">
                    功能分级的比较
                  </div>
                  <el-table
                    border
                    class="common-table"
                    :data="Dict.exhaustionTable"
                    height="345">
                    <el-table-column
                      prop="stage"
                      label="阶段"
                      width="120" />
                    <el-table-column
                      prop="definition"
                      label="定义" />
                  </el-table>
                </div>
                <img
                  slot="reference"
                  :src="require('@/assets/images/help-icon.png')"
                  @load="imgLoad">
              </el-popover>

解决方案：

给嵌套的Table 设置高度后，位置就正确了

其他关于el-popover 位置的问题：

如果里面数据动态化之后有问题位置不正确

/**
* 需获取到数据之后要
* this.$refs.popover.updatePopper()一下（用来重新计算位置的）
*/
  this.$nextTick(()=> {
    this.$refs.dcPopover.updatePopper() // 注意主要是这里
   })

触发方式为 hover 时的,可以修改open-delay

// open-delay 属性 值 过小时 没有作用
<el-popover ref="popperHeart" placement="bottom" width="720"  trigger="hover" :open-delay="500">

设置popper 的边界元素 boundariesElement: ‘viewport’,

<el-popover 
    ref="popperHeart" 
    placement="bottom" 
    width="720" 
    trigger="hover"
    :popper-options="{ boundariesElement: 'viewport', removeOnDestroy: true }"
>

boundariesElement默认是’viewport’，如果不需要跟边界重新计算元素的位置设置为’body’即可