需求：单行文本超出显示省略号，划过该文本时使用tooltip显示全部文本。

问题：由于数据是动态的，有时会很长，有时又比较短不会超出。如果一直保持显示tooltip就很不美观。

优化：超出文本时显示tooltip，不超出则不显示。

首先要判断文本是否溢出

/*** 判断是否文本溢出* @param e 事件对象* @returns  返回true为未溢出  false溢出*/
export const isBeyond = (e: any) => {const ev = window.event || e	// 浏览器兼容，最好写一下const textRange = (el: any) => {const textContent = elconst targetW = textContent.getBoundingClientRect().widthconst range = document.createRange()range.setStart(textContent, 0)range.setEnd(textContent, textContent.childNodes.length)const rangeWidth = range.getBoundingClientRect().widthreturn 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);};