快捷導(dǎo)航

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

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

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

前言

我們?cè)谕ǔＧ闆r下使用el-popover組件，都是讓組件自動(dòng)計(jì)算氣泡顯示位置。不過(guò)我之前遇到過(guò)這樣一個(gè)需求：當(dāng)觸發(fā)氣泡顯示的元素寬度太大，氣泡顯示位置可能會(huì)離鼠標(biāo)位置較遠(yuǎn)，用戶(hù)反映移動(dòng)鼠標(biāo)到氣泡上的距離太長(zhǎng)了，希望能讓氣泡在鼠標(biāo)進(jìn)入觸發(fā)元素的位置顯示。

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

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

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

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

實(shí)現(xiàn)代碼

<template>
  <el-popover
    ref="popover"
    title="標(biāo)題"
    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">通過(guò)修改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("鼠標(biāo)clientX", clientX);
        let timer = setTimeout(() => {
          console.log(this.$refs.popover.popperElm);
        }, 5);
      },
    },
  };
</script>

效果

看起來(lái)還不錯(cuò)，正當(dāng)我以為可以交差的時(shí)候，又發(fā)現(xiàn)了一個(gè)問(wèn)題?。?！

我設(shè)置了placement="bottom-start"，但是當(dāng)元素下方空間不夠，氣泡轉(zhuǎn)移到上方顯示的時(shí)候，offset屬性不生效了。

不過(guò)到這我就沒(méi)有再繼續(xù)研究下去了，因?yàn)槲野l(fā)現(xiàn)我能拿到氣泡元素，那我可以直接修改left屬性。

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

<template>
  <el-popover
    ref="popover"
    title="標(biāo)題"
    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">
        通過(guò)直接修改氣泡left屬性，改變氣泡出現(xiàn)位置
      </div>
    </div>
  </el-popover>
</template>
<script>
  module.exports = {
    methods: {
      handlerMouseenter(event) {
        // 鼠標(biāo)進(jìn)入觸發(fā)元素
        const popover = this.$refs.popover;
        let timer = setTimeout(() => {
          const { clientX } = event;
          const bodyWidth = document.body.clientWidth;
          // 找到氣泡元素
          const { popperElm } = popover;
          /**
           * 鼠標(biāo)位置+氣泡彈框?qū)挾仁欠裥∮赽ody的寬度
           * 1. 是，設(shè)置鼠標(biāo)位置為氣泡彈框橫向位移
           * 2. 否，設(shè)置body寬度-氣泡彈框?qū)挾葹闅馀輳椏驒M向位移
           */
          let disX =
            clientX + popperElm.offsetWidth < bodyWidth
              ? clientX
              : bodyWidth - popperElm.offsetWidth;
          popover.popperElm.style.left = disX + "px";
          clearTimeout(timer);
        }, 5);
      },
    },
  };
</script>

以上基本算是完美符合需求了，但是需要注意2點(diǎn)，

popperElm的值需要等組件創(chuàng)建/更新氣泡元素后才能拿到，所以需要延遲一點(diǎn)時(shí)間執(zhí)行修改left邏輯這里會(huì)出現(xiàn)2個(gè)問(wèn)題（我嘗試后使用延遲5ms沒(méi)有出現(xiàn)問(wèn)題）：

1.1 如果不延遲或延遲時(shí)間稍短會(huì)出現(xiàn)，沒(méi)拿到當(dāng)前氣泡元素，修改不生效

1.2 如果延遲時(shí)間稍長(zhǎng)會(huì)出現(xiàn)，氣泡先顯示在原來(lái)的位置，再顯示到修改后的位置，有一個(gè)閃現(xiàn)的效果需要判斷左右的空間是否能足夠顯示氣泡，如不能需要進(jìn)行處理（我的示例中頁(yè)面結(jié)構(gòu)簡(jiǎn)單只需要處理靠右時(shí)的氣泡顯示）總結(jié)

如果觸發(fā)元素上下空間足夠，使用方法一更簡(jiǎn)單，否則使用方法二效果更好