快捷導(dǎo)航

vue+elemen實現(xiàn)el-tooltip在文本超出區(qū)域后浮現(xiàn)

更新時間：2023年12月20日 11:48:23 作者：sgabon

el-tooltip組件本身就是懸浮提示功能,在對它進(jìn)行二次封裝時,實現(xiàn)超出的文本浮現(xiàn),本文就來介紹一下vue+elemen實現(xiàn)el-tooltip在文本超出區(qū)域后浮現(xiàn),感興趣的可以了解一下

前言

最近在做一個vue+element的項目，遇到的一些難搞的需求。
關(guān)于<el-tooltip>的使用想必也不用我多說了，官方文檔是相當(dāng)?shù)脑敿?xì)，基本使用自己去餓了么官網(wǎng)看。

具體需求

由于我的內(nèi)容是循環(huán)生成的，字體的多少，并不是一個定值，如果僅使用官方的<el-tooltip>組件的話，豈不是包著的每一個div都會有這個tooltip，結(jié)果導(dǎo)致一整個頁面的tooltip，體驗特別不好。而且整個頁面生成了上百個<el-tooltip>標(biāo)簽，占用了大量的資源。

解決方案

方案一

剛開始在網(wǎng)上翻找解決方案，找到一個別人將tooltip組件二次封裝，好用確實是好用，但是同樣會生成大量的tooltip標(biāo)簽，遂放棄。

方案二

后來，我想到了一個我用過的表格屬性——:show-overflow-tooltip=“true”——在表格組件中，某一個單元格中的內(nèi)容超過了該單列的列寬，會隱藏多余部分，通過…展示。并且將鼠標(biāo)移入即可查看該單元格內(nèi)的完整內(nèi)容。效果如圖：

效果展示

而鼠標(biāo)放到文字沒超出列寬的地方則不顯示 tooltip，神奇的是，整個頁面，只生成了一個<el-tooltip>標(biāo)簽，無論有多少內(nèi)容，永遠(yuǎn)只有一個<el-tooltip>存在，大大節(jié)省了資源。于是翻看源碼看他是怎么實現(xiàn)該功能的。

表格的tooltip屬性

具體方法

1.先在頁面上定義一個tooltip標(biāo)簽

<el-tooltip ref="tooltip" :content="tooltipContent" />

此標(biāo)簽就是要在頁面中生成的那個唯一的<el-tooltip>標(biāo)簽。

2.在文字區(qū)域的父標(biāo)簽上添加鼠標(biāo)移入移除方法

					   <div
                           class="card-carousel--card--footer"
                           @mouseenter="handleDivMouseEnter($event)"
                           @mouseleave="handleDivMouseleave($event)"
                         >
                           <p class="topicStyle"> {{ info } </p>
	                   </div>

前提是：承載內(nèi)容的標(biāo)簽需要有一個class。若要在組件標(biāo)簽上添加方法，應(yīng)該是要添加【.native】的。

3.引入需要的方法

import debounce from 'throttle-debounce/debounce'
import { getStyle } from '@/utils/dom.js

在created中添加

created() {
     this.activateTooltip = debounce(50, tooltip =&gt; tooltip.handleShowPopper())
},

此處getStyle方法是自動計算邊距，我將源碼中的js提出來，方便使用。
源碼位置：\element-dev\packages\table\src\table-body.js

4.在methods添加鼠標(biāo)移入移出方法

// 鼠標(biāo)移入
handleDivMouseEnter(event) {
        const target = event.target
        // 判斷是否text-overflow, 如果是就顯示tooltip
        let child = target.querySelector('.groupItemClass')
	    // 在此處我一共有三個class控制三塊class，這一塊主要是對<el-menu>以及文本區(qū)域控制，所以class要有多個。
        // 如果區(qū)域?qū)挾缺幌薅ǎ瑒t通過高度判斷
        let heightFlag = false
        if (!child) {
          child = target.querySelector('.setItemClass')
          if (!child) {
            // 文本區(qū)域 
            child = target.querySelector('.topicStyle')
          }
        }
        if (child.scrollHeight > child.offsetHeight) {
            heightFlag = true
        }
        // use range width instead of scrollWidth to determine whether the text is overflowing
        // to address a potential FireFox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1074543#c3
        const range = document.createRange()
        range.setStart(child, 0)
        range.setEnd(child, child.childNodes.length)
        const rangeWidth = range.getBoundingClientRect().width // 文本區(qū)域?qū)挾?
        const padding = (parseInt(getStyle(target, 'paddingLeft'), 10) || 0) +
          (parseInt(getStyle(target, 'paddingRight'), 10) || 0)
        if ((rangeWidth + padding > target.offsetWidth || child.scrollWidth > child.offsetWidth) || heightFlag && this.$refs.tooltip) {
          const tooltip = this.$refs.tooltip
          // TODO 會引起整個 Table 的重新渲染，需要優(yōu)化
          this.tooltipContent = target.innerText || target.textContent
          tooltip.referenceElm = target
          tooltip.$refs.popper && (tooltip.$refs.popper.style.display = 'none')
          tooltip.doDestroy()
          tooltip.setExpectedState(true)
          this.activateTooltip(tooltip)
        }
      }
      
// 鼠標(biāo)移出  
handleDivMouseleave(event) {
        const tooltip = this.$refs.tooltip
        if (tooltip) {
          tooltip.setExpectedState(false)
          tooltip.handleClosePopper()
        }
      },

效果展示

而且在頁面中只生成一個<el-tooltip>標(biāo)簽。

根據(jù)不同的情況可以通過判斷寬度和高度，對自己的頁面進(jìn)行一定的兼容，對方法handleDivMouseEnter()進(jìn)行相應(yīng)的修改。

到此這篇關(guān)于vue+elemen實現(xiàn)el-tooltip在文本超出區(qū)域后浮現(xiàn)的文章就介紹到這了,更多相關(guān)elemen el-tooltip文本超出浮現(xiàn)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: