关于elementui el-popover 位置偏移到浏览器最左上角问题

最新推荐文章于 2025-06-16 18:32:03 发布

sun_smell

最新推荐文章于 2025-06-16 18:32:03 发布

阅读量520

点赞数 1

CC 4.0 BY-SA版权

文章标签： elementui vue.js 前端

本文链接：https://blog.csdn.net/sun_smell/article/details/147771601

在使用el-popover弹框显示的时候发现弹框跑到浏览器最左上角去了，位置偏移严重，当修改代码保存的时候会恢复正常，刷新页面的时候就又异常了，这是被body其他全局元素给影响到了，暂时未找到具体哪个影响的，解决办法是在el-popover上加上v-if来控制其渲染，这样在页面刷新加载的时候就不会去渲染el-popover，body上的元素也就影响不到它了。下面是示例代码，其中show 变量是鼠标点击其他图标时的

<el-popover placement="left" v-if="show">
      <template #reference>
        <div class="option-item">
          <img src="../../assets/images/index/icon-code.png" class="icon-code" />
          {{ $t('扫码咨询') }}
        </div>
      </template>
      <template #default>
        <div class="icon-wechat-code">
          <img src="../../assets/images/wechat-code.jpg" 
            style="width: 124px; height: 124px" />
        </div>
      </template>
</el-popover>