文本溢出tooltip显示完整内容

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

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

优化：超出文本时显示tooltip，不超出则不显示。
首先要判断文本是否溢出

// 工具函数 判断文本是否溢出
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) 
} 

使用

<el-tooltip :content="content" :disabled="disabled">
   <span @mouseenter="handleMouse($event)">
      {{ content }}
   </span>
</el-tooltip> 

let disabled = ref(true)
const handleMouse = (e: any) => {
   disabled.value = isBeyond(e);
};