vue.js修改el-popover組件顯示位置

更新時間：2023年06月27日 15:57:32 作者：BAtodl

el-popover是一個基于element-ui框架設計的,用于浮動展示提示或菜單的UI組件,下面這篇文章主要給大家介紹了關于vue.js修改el-popover組件顯示位置的相關資料,需要的朋友可以參考下

前言

我們在通常情況下使用el-popover組件，都是讓組件自動計算氣泡顯示位置。不過我之前遇到過這樣一個需求：當觸發(fā)氣泡顯示的元素寬度太大，氣泡顯示位置可能會離鼠標位置較遠，用戶反映移動鼠標到氣泡上的距離太長了，希望能讓氣泡在鼠標進入觸發(fā)元素的位置顯示。

方法一：通過修改組件 offset 屬性，修改氣泡顯示位置

首先，我想到看組件的文檔，看組件是否有提供這樣的需求支持。然后我找到一個屬性offset: 出現(xiàn)位置的偏移量，這樣我只需把鼠標的位置設置進去不就可以了嗎？

修改完后發(fā)現(xiàn)實際效果和預想的有些出入

仔細查看后發(fā)現(xiàn)，offset這個偏移量是在組件計算出的left距離的基礎上再進行偏移，那么想要顯示位置等于偏移量,需要限制組件計算的left=0，我想這點通過設置placement屬性也可以實現(xiàn)。

實現(xiàn)代碼

<template>
  <el-popover
    ref="popover"
    title="標題"
    width="200"
    content="這是嵌套操作的內(nèi)容"
    :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屬性，改變氣泡出現(xiàn)的位置</div>
    </div>
  </el-popover>
</template>

<script>
  module.exports = {
    data() {
      return {
        popoverOffset: 0, // 出現(xiàn)位置的偏移量
      };
    },
    methods: {
      handlerMouseenter(event) {
        const { clientX } = event;
        this.popoverOffset = clientX;
        console.log("鼠標clientX", clientX);
        let timer = setTimeout(() => {
          console.log(this.$refs.popover.popperElm);
        }, 5);
      },
    },
  };
</script>

效果

看起來還不錯，正當我以為可以交差的時候，又發(fā)現(xiàn)了一個問題?。?！

我設置了placement="bottom-start"，但是當元素下方空間不夠，氣泡轉移到上方顯示的時候，offset屬性不生效了。

不過到這我就沒有再繼續(xù)研究下去了，因為我發(fā)現(xiàn)我能拿到氣泡元素，那我可以直接修改left屬性。

方法二：通過直接修改氣泡元素 left 屬性，修改氣泡顯示位置

<template>
  <el-popover
    ref="popover"
    title="標題"
    width="200"
    trigger="hover"
    content="這是嵌套操作的內(nèi)容"
  >
    <div
      slot="reference"
      style="width: 100%; height: 100px; background: pink; overflow-x: scroll"
      @mouseenter="handlerMouseenter"
    >
      <div style="width: 3000px">
        通過直接修改氣泡left屬性，改變氣泡出現(xiàn)位置
      </div>
    </div>
  </el-popover>
</template>
<script>
  module.exports = {
    methods: {
      handlerMouseenter(event) {
        // 鼠標進入觸發(fā)元素
        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>