vue3溢出文本tooltip或title展示解决方案—如何获取文本宽度

vue3溢出文本tooltip或title展示解决方案—如何获取文本宽度

Author：zhoulujun Date：2023-03-06 Hits：5

解决文本溢出，鼠标悬浮展示tooltips，要解决2大难题。第一个是解决文本宽度的问题。毕竟 若果text-overflow: ellipsis生效，那么其父容

解决文本溢出，鼠标悬浮展示tooltips，要解决2大难题。

第一个是解决文本宽度的问题。毕竟 若果 text-overflow: ellipsis生效，那么其父容器就是文本，是无法直接获取宽度的。比如span元素是无法直接获取clienWidth。

第二个，就是文本编辑更改搞，需要重新计算。

文本宽度获取总结：

网上总结的足够多，比如：

• 面试官：你是如何获取文本宽度的？ https://juejin.cn/post/7091990279565082655

• 通过canvas方法计算任意字符串所占的实际宽度 https://blog.csdn.net/qiao_qiao_happy/article/details/115560550

这个总结大体如下：

直接按照当前字体大小 text.length * fontSize：

这样简单粗暴，但是仔细想下，文字、字母，标点符号，特殊字符等的出现会让计算有特别大的偏差。

隐藏元素计算

创建一个 div 标签，并添加到 body

设置标签 visibility: hidden 或者其他形式

动态修改 div 的 innerText为要计算的文本

offsetWidth、scrollWidth 获取宽度

function getActualWidthOfChars(text: string, options: CSSProperties, dom = document): number {
  const { fontSize, fontFamily } = options;
  const tempDom = document.createElement('div');
  tempDom.style.cssText = `position: absolute;left: -999em;top:-999em;z-index: -1;
    ${fontSize ? 'font-size: ;' : 'fontSize'}
    ${fontFamily  ? 'font-family' : 'fontFamily'}
  `;
  tempDom.textContent = text;
  dom.append(tempDom);
  const { clientWidth } = tempDom;
  dom.removeChild(tempDom);
  return clientWidth;
}

这个频繁创建dom也可以解决，就是缓存dom，比如全局变量或者闭包。但是这种方法在字符串中含有多个空格时，测出来的宽度会一样，当然可以通过pre  code元素避免。其实最好是转义" "呀。

canvas api TextMetrics获取

function getActualWidthOfChars(text: string, options: Record<string, any> = {}): number {
  const { size = 14, family = 'Microsoft YaHei' } = options;
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  ctx.font = `${size}px ${family}`;
  const metrics = ctx.measureText(text);
  const actual = Math.abs(metrics.actualBoundingBoxLeft) + Math.abs(metrics.actualBoundingBoxRight);
  return Math.max(metrics.width, actual);
}

这个相比dom操作，无需更改dom结构。

网上很推荐的是使用最后一种方法，但是在实际项目中，做通用化的时候，可能是 ：

链接是：<a href=" style="font-size:30px;" >test</a>2222

这个TextMetrics不好弄。第二个，我们无论做成组件还是 指令，textContent 更好地获取内容文本。关于textContent，推荐《小tips: JS DOM innerText和textContent的区别 https://www.zhangxinxu.com/wordpress/2019/09/js-dom-innertext-textcontent/》

再次通过 getComputedStyle() 后去当前元素的样式属性。二者结合非常好使。

当然，canvas也不是没有解决办法：

综合考量，还是使用Dom方案。

如何监听文本变化

首先想到的肯定是ResizeObserverSize，其次是MutationObserver

MutationObserver

看api，MutationObserver是天选之子。

MutationObserver的出现就是为了解决MutationEvent带来的问题。用来观察Node（节点）变化的。具体参看：《了解HTML5中的MutationObserver https://segmentfault.com/a/1190000012787829?utm_source=tag-newest》

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

const observer = new MutationObserver((mutationList, observer) => {
  for (const mutation of mutationList) {
    switch (mutation.type) {
      case 'attributes':
        console.log(`The ${mutation.attributeName} attribute was modified.`);
        break;
      case 'childList':
        console.log('A child node has been added or removed.');
        break;
    }
  }
});
const targetNode = document.getElementById('some-id');
observer.observe(targetNode, { attributes: true, childList: true, subtree: true });

这个配置太复杂，而且我们只需观测宽度变化，不需要那么多操作

ResizeObserver

https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver

const observer = new ResizeObserver((entries) => {
  console.log("Size changed");
});
const targetNode = document.getElementById('some-id');
observer.observe(targetNode);

这个用的 多，最终还是选择ResizeObserver。

在Vue3如何使用？

其实就是使用上面的方法封装一个组件

import {
  ObjectDirective,
} from 'vue';

import getActualWidthByCanvas from '../utils/getActualWidthByCanvas';
import getActualWidthByDom from '../utils/getActualWidthByDom';

const overflowTitle: ObjectDirective<HTMLElement> = {
  mounted(el, { value = {} }) {
    const { clientWidth } = el.parentElement;
    if (!clientWidth) {
      return;
    }
    const { content, calType = 'dom' } = value;
    const text = content || el.innerText;
    let textWidth = 0;
    if (calType === 'dom') {
      textWidth = getActualWidthByDom(el.textContent, null, el.parentElement);
    } else {
      const { fontSize, fontFamily } = getComputedStyle(el);
      textWidth = getActualWidthByCanvas(text, { fontSize, fontFamily });
    }
    if (textWidth > clientWidth) {
      el.setAttribute('title', text);
    }
  },
};

export default overflowTitle;

这里面可以跟进一步封装。

在mouted 周期里面里面

mounted(el: HTMLElement, binding: DirectiveBinding) {
  createInstance(el, binding);
}

但是，个人觉得还是直接用组件比较好。

具体查看：https://github.com/zhoulujun/textOverflowTitle

转载本站文章《vue3溢出文本tooltip或title展示解决方案—如何获取文本宽度》,
请注明出处：https://www.zhoulujun.cn/html/webfront/ECMAScript/vue3/8933.html