element plus el-table show-overflow-tooltip实现源码

element plus 2.7.2 版本

文件地址：packages/components/table/src/table-body/events-helper.ts

核心代码

 const getPadding = (el: HTMLElement) => {
    const style = window.getComputedStyle(el, null)
    const paddingLeft = Number.parseInt(style.paddingLeft, 10) || 0
    const paddingRight = Number.parseInt(style.paddingRight, 10) || 0
    const paddingTop = Number.parseInt(style.paddingTop, 10) || 0
    const paddingBottom = Number.parseInt(style.paddingBottom, 10) || 0
    return {
      left: paddingLeft,
      right: paddingRight,
      top: paddingTop,
      bottom: paddingBottom,
    }
  }
 const handleCellMouseEnter = (
    event: MouseEvent,
    row: T,
    tooltipOptions: TableOverflowTooltipOptions
  ) => {
    const table = parent
    const cell = getCell(event)
    const namespace = table?.vnode.el?.dataset.prefix
    if (cell) {
      const column = getColumnByCell(
        {
          columns: props.store.states.columns.value,
        },
        cell,
        namespace
      )
      if (cell.rowSpan > 1) {
        toggleRowClassByCell(cell.rowSpan, event, addClass)
      }
      const hoverState = (table.hoverState = { cell, column, row })
      table?.emit(
        'cell-mouse-enter',
        hoverState.row,
        hoverState.column,
        hoverState.cell,
        event
      )
    }

    if (!tooltipOptions) {
      return
    }

    // 判断是否text-overflow, 如果是就显示tooltip
    const cellChild = (event.target as HTMLElement).querySelector(
      '.cell'
    ) as HTMLElement
    if (
      !(
        hasClass(cellChild, `${namespace}-tooltip`) &&
        cellChild.childNodes.length
      )
    ) {
      return
    }


/****从这里开始都是***/



    // use range width instead of scrollWidth to determine whether the text is overflowing
    // to address a potential FireFox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1074543#c3
    const range = document.createRange()
    range.setStart(cellChild, 0)
    range.setEnd(cellChild, cellChild.childNodes.length)
    /** detail: https://github.com/element-plus/element-plus/issues/10790
     *  What went wrong?
     *  UI > Browser > Zoom, In Blink/WebKit, getBoundingClientRect() sometimes returns inexact values, probably due to lost precision during internal calculations. In the example above:
     *    - Expected: 188
     *    - Actual: 188.00000762939453
     */
    let rangeWidth = range.getBoundingClientRect().width
    let rangeHeight = range.getBoundingClientRect().height
    const offsetWidth = rangeWidth - Math.floor(rangeWidth)
    const { width: cellChildWidth, height: cellChildHeight } =
      cellChild.getBoundingClientRect()
    if (offsetWidth < 0.001) {
      rangeWidth = Math.floor(rangeWidth)
    }
    const offsetHeight = rangeHeight - Math.floor(rangeHeight)
    if (offsetHeight < 0.001) {
      rangeHeight = Math.floor(rangeHeight)
    }

    const { top, left, right, bottom } = getPadding(cellChild)
    const horizontalPadding = left + right
    const verticalPadding = top + bottom
    if (
      rangeWidth + horizontalPadding > cellChildWidth ||
      rangeHeight + verticalPadding > cellChildHeight ||
      cellChild.scrollWidth > cellChildWidth
    ) {
      createTablePopper(
        tooltipOptions,
        cell.innerText || cell.textContent,
        cell,
        table
      )
    }
  }