原文地址：https://blog.csdn.net/bbt953/article/details/130388630
需求：單行文本超出顯示省略號，劃過該文本時使用 el-tooltip 顯示全部文本
問題：由于數(shù)據(jù)是動態(tài)的，有時會很長，有時又比較短不會超出髓需。如果一直保持顯示 el-tooltip 就很不美觀
優(yōu)化：超出文本時顯示 el-tooltip衬横，不超出則不顯示
首先要判斷文本是否溢出
/**
* 判斷是否文本溢出
* @param e 事件對象
* @returns 返回 true 為未溢出，false 溢出
*/
export const isBeyond = (e: any) => {
const ev = window.event || e; // 瀏覽器兼容
const textRange = el => {
const textContent = el;
const targetW = textContent.getBoundingClientRect().width;
const range = document.createRange();
range.setStart(textContent, 0);
range.setEnd(textContent, textContent.childNodes.length);
const rangeWidth = range.getBoundingClientRect().width;
return rangeWidth > targetW;
}
return !textRange(ev.target); // target 可以保證當(dāng)前劃過的 dom 節(jié)點一直保持是: el-tooltip__trigger
}
使用
<el-tooltip :content="detailData?.category" :disabled="disabled">
<span @mouseenter="handleMouse($event)">
{{ detailData?.category }}
</span>
</el-tooltip>
let disabled = ref(true)
const handleMouse = (e: any) => {
disabled.value = isBeyond(e);
};
以上是用于 elementplus 的罩缴，以下是 2023_08_30 更新用于 a-tooltip 的咪橙，由于 a-tooltip 底下沒有那么多子節(jié)點，無法再用 createRange 去判斷果善，用 scrollWidth 去拿到實際文本長度诊笤，跟 clientWidth 文本可視寬度作比較
export const isBeyond = e => {
const ev = window.event || e;
const textContent = ev.target ;
const clientW = textContent.clientWidth;
const scrollW = textContent.scrollWidth;
return scrollW > clientW; // true 為溢出 false 為不溢出
}
<a-tooltip placement="topLeft" :visible="isOpen">
<template #title>{{ item?.value }}</template>
<span
class="flex-1 overflow-ellipsis whitespace-nowrap overflow-hidden"
@mouseenter="handleEnter($event)"
@mouseleave="isOpen = false">
{{ item?.value }}
</span>
</a-tooltip>
let isOpen = ref(false);
const handleEnter = e => {
isOpen.value = isBeyond (e);
}
切記切記，判斷文本溢出之前一定要使用單行文件溢出顯示省略號的 css巾陕，并且如果是 a-tooltip讨跟，要加在 a-tooltip 內(nèi)部要溢出隱藏的 span 上，不然 scrollWidth 和 clientWidth 會一直為0
2024-3-7更新惜论，如果上面不行许赃，試試下面這個
this.isToolTip = e.target.clientWidth >= e.target.scrollWidth
還有可能是高度
this.isToolTip = e.target.clientHeight >= e.target.scrollHeight
