修改el-popover显示位置

我们在通常情况下使用

el-popover

组件，都是让组件自动计算气泡显示位置。不过我之前遇到过这样一个需求：当触发气泡显示的元素宽度太大，气泡显示位置可能会离鼠标位置较远，用户反映移动鼠标到气泡上的距离太长了，希望能让气泡在鼠标进入触发元素的位置显示。

方法一：通过修改组件 offset 属性，修改气泡显示位置

首先，我想到看组件的文档，看组件是否有提供这样的需求支持。然后我找到一个属性

offset: 出现位置的偏移量

，这样我只需把鼠标的位置设置进去不就可以了吗？

修改完后发现实际效果和预想的有些出入

仔细查看后发现，

offset

这个偏移量是在组件计算出的

left

距离的基础上再进行偏移，那么想要显示位置等于偏移量,需要限制组件计算的

left=0

，我想这点通过设置

placement

属性也可以实现。

实现代码

<template><el-popoverref="popover"title="标题"width="200"content="这是嵌套操作的内容":offset="popoverOffset"placement="bottom-start"trigger="hover"><divslot="reference"style="
        width: 100%;
        height: 100px;
        background: aquamarine;
        overflow-x: scroll;
      "@mouseenter="handlerMouseenter"><divstyle="width: 3000px">通过修改offset属性，改变气泡出现的位置</div></div></el-popover></template><script>
  module.exports ={data(){return{popoverOffset:0,// 出现位置的偏移量};},methods:{handlerMouseenter(event){const{ clientX }= event;this.popoverOffset = clientX;
        console.log("鼠标clientX", clientX);let timer =setTimeout(()=>{
          console.log(this.$refs.popover.popperElm);},5);},},};</script>

效果

看起来还不错，正当我以为可以交差的时候，又发现了一个问题！！！

我设置了

placement="bottom-start"

，但是当元素下方空间不够，气泡转移到上方显示的时候，

offset

属性不生效了。

不过到这我就没有再继续研究下去了，因为我发现我能拿到气泡元素，那我可以直接修改

left

属性。

方法二：通过直接修改气泡元素 left 属性，修改气泡显示位置

<template><el-popoverref="popover"title="标题"width="200"trigger="hover"content="这是嵌套操作的内容"><divslot="reference"style="width: 100%;height: 100px;background: pink;overflow-x: scroll"@mouseenter="handlerMouseenter"><divstyle="width: 3000px">
        通过直接修改气泡left属性，改变气泡出现位置
      </div></div></el-popover></template><script>
  module.exports ={methods:{handlerMouseenter(event){// 鼠标进入触发元素const popover =this.$refs.popover;let timer =setTimeout(()=>{const{ clientX }= event;const bodyWidth = document.body.clientWidth;// 找到气泡元素const{ popperElm }= popover;/**
           * 鼠标位置+气泡弹框宽度是否小于body的宽度
           * 1. 是，设置鼠标位置为气泡弹框横向位移
           * 2. 否，设置body宽度-气泡弹框宽度为气泡弹框横向位移
           */let disX =
            clientX + popperElm.offsetWidth < bodyWidth
              ? clientX
              : bodyWidth - popperElm.offsetWidth;

          popover.popperElm.style.left = disX +"px";clearTimeout(timer);},5);},},};</script>

以上基本算是完美符合需求了，但是需要注意2点，

1. popperElm的值需要等组件创建/更新气泡元素后才能拿到，所以需要延迟一点时间执行修改left逻辑这里会出现2个问题（我尝试后使用延迟5ms没有出现问题）： 1.1 如果不延迟或延迟时间稍短会出现，没拿到当前气泡元素，修改不生效 1.2 如果延迟时间稍长会出现，气泡先显示在原来的位置，再显示到修改后的位置，有一个闪现的效果
2. 需要判断左右的空间是否能足够显示气泡，如不能需要进行处理（我的示例中页面结构简单只需要处理靠右时的气泡显示）

总结

如果触发元素上下空间足够，使用方法一更简单，否则使用方法二效果更好