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

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

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

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

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

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

文本宽度获取总结:

网上总结的足够多,比如:

这个总结大体如下:

直接按照当前字体大小 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

vue3溢出文本tooltip或title展示解决方案—如何获取文本宽度的更多相关文章

  1. JS中通过id或者class获取文本内容

    一.JS通过id获取文本内容 二.JS通过class获取文本内容

  2. 【NLP】Python NLTK获取文本语料和词汇资源

    Python NLTK 获取文本语料和词汇资源 作者:白宁超 2016年11月7日13:15:24 摘要:NLTK是由宾夕法尼亚大学计算机和信息科学使用python语言实现的一种自然语言工具包,其收集 ...

  3. js/jquery获取文本框的值与改变文本框的值

    我们就用它来学习获取文本框的值及改变文本框的值. 代码如下 复制代码 <script>function get1(){ document.getElementById("txtb ...

  4. jquery设置文本框值 与获取文本框的值

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  5. python开发_tkinter_获取文本框内容_给文本框添加键盘输入事件

    在之前的blog中有提到python的tkinter中的菜单操作 python开发_tkinter_窗口控件_自己制作的Python IDEL_博主推荐 python开发_tkinter_窗口控件_自 ...

  6. DOM节点中获取文本易混淆的属性

    DOM 节点中对于获取文本易混淆的属性,innerText, innerHTML, outerHTML, textContent, nodeValue. 一个实例: <!DOCTYPE html ...

  7. JavaWeb后台从input表单获取文本值的两种方式

    JavaWeb后台从input表单获取文本值的两种方式 #### index.html <!DOCTYPE html> <html lang="en"> & ...

  8. 每天一个JavaScript实例-展示设置和获取CSS样式设置

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. 获取元素节点的子节点 & 获取文本节点

    1. 获取元素节点的子节点(**只有元素节点才有子节点):              ①. childNodes 属性获取全部的子节点, 但该方法不实用. 因为如果要获取指定的节点          ...

  10. jquery获取文本框的内容

    使用jquery获取文本框的内容有以下几种: 1.根据ID取值(id属性): // javascript <script type="text/javascript"> ...

随机推荐

  1. C++基础杂记(3)

    类的继承 基类与派生类之间的构造行为 在派生类中使用基类方法 protected 的访问权限 多态公有继承 关键字 virtual 示例 抽象基类(ABC) 私有继承和保护继承 多重继承 类的继承 基 ...

  2. MySQL锁:InnoDB行锁需要避免的坑

    前言 换了工作之后,接近半年没有发博客了(一直加班),emmmm.....今天好不容易有时间,记录下工作中遇到的一些问题,接下来应该重拾知识点了.因为新公司工作中MySQL库经常出现查询慢,锁等待,节 ...

  3. 给STM32装点中国风——华为LiteOS移植

    我都二手程序员好几个礼拜了!想给我的STM32来点"中国风",装个华为LiteOS操作系统. 在此之前,我也试过STM32CubeMX自带的FreeRTOS操作系统,不知是何缘故, ...

  4. Educational Codeforces Round 127 (Rated for Div. 2) E. Preorder

    设\(f[v]\)是以结点\(v\)为根的方案数,设左子树的根为\(x\),右子树的根为\(y\),那么如果左右子树完全相同,那么我们交换左右子树对方案没有任何影响,都是: \[f[v] = f[x] ...

  5. C语言已知单链表LA=(a1,a2,…,am)和LB=(b1,b2,…,bn),编写程序按以下规则将它们合并成一个单链表LC,

    LC=(a1,b1,-,am,bm,bm+1,-,bn),m<=n 或者 LC=(a1,b1,-,bn,an,an+1,-,am),m>n /* 开发者:慢蜗牛 开发时间:2020.6.1 ...

  6. java中Calendar日历类型常见方法

    Calendar是Java中常用的时间处理工具之一,它提供了很多日历类型常见方法,下面是一些常用的方法及对应的代码和运行结果. 1. 如何创建 Calendar 日历对象 Calendar 是一个抽象 ...

  7. 一文带你掌握C语言的循环结构

    C语言循环结构详解 在C语言中,循环结构是一种重要的控制结构,它允许我们重复执行一段代码,以达到特定的目的.循环结构可以帮助我们简化重复性的任务,提高代码的效率.本篇文章将深入探讨C语言中的循环结构, ...

  8. 如何自学 PS、PR 等软件?

    学习Photoshop(PS)和Premiere Pro(PR)等软件需要一定的时间和耐心,以下是非常详细的自学指南. 第一部分:规划学习路线 1. 确定学习目标 在自学PS和PR之前,首先要明确自己 ...

  9. 4 HTTP的“四层”和“七层”

    目录 1 四层:TCP/IP 网络分层模型 2 七层:OSI网络分层模型 3 TCP/IP 协议栈的工作方式 1 四层:TCP/IP 网络分层模型 四层是指TCP/IP 网络分层模型. 第一层:&qu ...

  10. MybatisPlus实现高效的多对多查询

    1.前置 事先声明一下代码中蕴含了大量的Stream和Lambda表达式操作,还不清楚的小伙伴可以去参考一下Java8新特性Stream流,而却我是用的是MybatisPlus这方面不清楚的也可以参考 ...