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