[js] Определить, выходит ли текст за пределы

Требование: однострочный текст выходит за пределы отображаемого многоточия, а всплывающая подсказка используется для отображения всего текста при пересечении текста.

Проблема: поскольку данные динамические, иногда они будут очень длинными, а иногда относительно короткими и не превышают. Было бы неприглядно постоянно отображать всплывающую подсказку.

Оптимизация: всплывающая подсказка отображается, когда выходит за пределы текста, и не отображается, если нет.

首先要判断文本是否溢出

/**
 * 判断是否文本溢出
 * @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);
 };