vue.js修改el-popover组件显示位置

<template>
  <el-popover
    ref="popover"
    title="标题"
    width="200"
    content="这是嵌套操作的内容"
    :offset="popoverOffset"
    placement="bottom-start"
    trigger="hover"
  >
    <div
      slot="reference"
      style="
        width: 100%;
        height: 100px;
        background: aquamarine;
        overflow-x: scroll;
      "
      @mouseenter="handlerMouseenter"
    >
      <div style="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>

<template>
  <el-popover
    ref="popover"
    title="标题"
    width="200"
    trigger="hover"
    content="这是嵌套操作的内容"
  >
    <div
      slot="reference"
      style="width: 100%; height: 100px; background: pink; overflow-x: scroll"
      @mouseenter="handlerMouseenter"
    >
      <div style="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>