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

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

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

首先要判断文本是否溢出

/**
 * 判断是否文本溢出
 * @param e 事件对象
 * @returns  返回true为未溢出  false溢出
 */
export const isBeyond = (e: any) => {
    
    
  const ev = window.event || e	// 浏览器兼容，最好写一下
  const textRange = (el: any) => {
    
    
    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);
 };