vue+elemen實現(xiàn)el-tooltip在文本超出區(qū)域后浮現(xiàn)
前言
最近在做一個vue+element的項目，遇到的一些難搞的需求。
關(guān)于<el-tooltip>的使用想必也不用我多說了，官方文檔是相當?shù)脑敿殻臼褂米约喝ヰI了么官網(wǎng)看。
具體需求
由于我的內(nèi)容是循環(huán)生成的，字體的多少，并不是一個定值，如果僅使用官方的<el-tooltip>組件的話，豈不是包著的每一個div都會有這個tooltip，結(jié)果導(dǎo)致一整個頁面的tooltip，體驗特別不好。而且整個頁面生成了上百個<el-tooltip>標簽，占用了大量的資源。
解決方案
方案一
剛開始在網(wǎng)上翻找解決方案，找到一個別人將tooltip組件二次封裝，好用確實是好用，但是同樣會生成大量的tooltip標簽，遂放棄。
方案二
后來，我想到了一個我用過的表格屬性——:show-overflow-tooltip=“true”——在表格組件中，某一個單元格中的內(nèi)容超過了該單列的列寬，會隱藏多余部分，通過…展示。并且將鼠標移入即可查看該單元格內(nèi)的完整內(nèi)容。效果如圖：
而鼠標放到文字沒超出列寬的地方則不顯示 tooltip，神奇的是，整個頁面，只生成了一個<el-tooltip>標簽，無論有多少內(nèi)容，永遠只有一個<el-tooltip>存在，大大節(jié)省了資源。于是翻看源碼看他是怎么實現(xiàn)該功能的。
具體方法
1.先在頁面上定義一個tooltip標簽
<el-tooltip ref="tooltip" :content="tooltipContent" />
此標簽就是要在頁面中生成的那個唯一的<el-tooltip>標簽。
2.在文字區(qū)域的父標簽上添加鼠標移入移除方法
<div
class="card-carousel--card--footer"
@mouseenter="handleDivMouseEnter($event)"
@mouseleave="handleDivMouseleave($event)"
>
<p class="topicStyle"> {{ info } </p>
</div>
前提是：承載內(nèi)容的標簽需要有一個class。若要在組件標簽上添加方法，應(yīng)該是要添加【.native】的。
3.引入需要的方法
import debounce from 'throttle-debounce/debounce'
import { getStyle } from '@/utils/dom.js
在created中添加
created() {
this.activateTooltip = debounce(50, tooltip => tooltip.handleShowPopper())
},
此處getStyle方法是自動計算邊距，我將源碼中的js提出來，方便使用。
源碼位置：\element-dev\packages\table\src\table-body.js
4.在methods添加鼠標移入移出方法
// 鼠標移入
handleDivMouseEnter(event) {
const target = event.target
// 判斷是否text-overflow, 如果是就顯示tooltip
let child = target.querySelector('.groupItemClass')
// 在此處我一共有三個class控制三塊class，這一塊主要是對<el-menu>以及文本區(qū)域控制，所以class要有多個。
// 如果區(qū)域?qū)挾缺幌薅?，則通過高度判斷
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)
}
}
// 鼠標移出
handleDivMouseleave(event) {
const tooltip = this.$refs.tooltip
if (tooltip) {
tooltip.setExpectedState(false)
tooltip.handleClosePopper()
}
},
效果展示
而且在頁面中只生成一個<el-tooltip>標簽。
根據(jù)不同的情況可以通過判斷寬度和高度，對自己的頁面進行一定的兼容，對方法handleDivMouseEnter()進行相應(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)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue編寫自定義Plugin詳解,在Vue開發(fā)中，我們經(jīng)常需要使用一些第三方庫或功能性模塊，Vue插件就是一種將這些庫或模塊集成到Vue應(yīng)用中的方式,插件是Vue.js提供的一種機制，用于擴展Vue的功能,需要的朋友可以參考下2023-08-08
前端vue中實現(xiàn)文件下載的幾種方法總結(jié)
這篇文章主要介紹了前端vue中實現(xiàn)文件下載的幾種方法總結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
key屬性是一個特殊的屬性，用于標識每個節(jié)點的唯一性。在Vue2.x版本中的key和Vue3.x版本中的key有很大的不同，那么在這篇文章中，我們將會討論Vue2中的key和Vue3中的key的區(qū)別2023-04-04
今天小編就為大家分享一篇Vue項目查看當前使用的elementUI版本的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue 多選框所選數(shù)量動態(tài)變換Box的高度
在Web開發(fā)中,使用Vue.js框架可以通過ref屬性、v-model指令和計算屬性等特性實現(xiàn)元素高度的動態(tài)調(diào)整,文章詳細介紹了如何利用Vue的功能根據(jù)多選框的選擇數(shù)量動態(tài)改變元素的高度,并通過多個示例展示其應(yīng)用2024-09-09
這篇文章主要為大家詳細介紹了Vuex實現(xiàn)購物車小功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
淺談vue使用axios的回調(diào)函數(shù)中this不指向vue實例,為undefined
element-ui 表格sortable排序手動js清除方式
Vue中的函數(shù)同步執(zhí)行導(dǎo)致的數(shù)據(jù)獲取失敗問題處理辦法