Platform/src/components/handsontable/renderer/renderers/popoverValueRenderer.ts

import { bindPopover } from '@/components/popover/composables/usePopover';
import { classLeft } from '@/constants/commonClassName';
import { getTextWidth } from '@/utils/common/tools';
import { parse } from '@/utils/frontend/dom';
import { GridSettings } from '@sc/handsontable';

let font: string | undefined;

// 首次获取一次就行，提高性能，所有表格字体应是统一的
const getFont = (container: HTMLElement) => {
  if (font) return font;
  font = getComputedStyle(container).font;
  return font;
};

// 如果字符宽度超过列宽，悬浮提示
export default function popoverValueRenderer(
  instance: Handsontable,
  td: HTMLElement,
  row: number,
  col: number,
  prop: string | number,
  value: any,
  cellProperties: GridSettings
): HTMLElement {
  // 当前行的源数据
  td.innerHTML = ''; // 先清空数据，多次刷新时会出现两行的问题
  td.className = (cellProperties.className as string) || classLeft;
  if (value) {
    const container = parse(`<div>${value}</div>`) as HTMLElement;
    td.appendChild(container);
    setTimeout(() => {
      const colWidth = instance.getColWidth(col) - 4; // 减去padding
      const textWidth = getTextWidth(value, getFont(container));
      if (textWidth > colWidth) bindPopover(td, container, value);
    });
  }

  return td;
}