原文地址：https://blog.csdn.net/bbt953/article/details/130388630
需求：单行文本超出显示省略号，划过该文本时使用 el-tooltip 显示全部文本
问题：由于数据是动态的，有时会很长，有时又比较短不会超出。如果一直保持显示 el-tooltip 就很不美观
优化：超出文本时显示 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 可以保证当前划过的 dom 节点一直保持是: 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 底下没有那么多子节点，无法再用 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 内部要溢出隐藏的 span 上，不然 scrollWidth 和 clientWidth 会一直为0
2024-3-7更新，如果上面不行，试试下面这个
this.isToolTip = e.target.clientWidth >= e.target.scrollWidth
还有可能是高度
this.isToolTip = e.target.clientHeight >= e.target.scrollHeight
