el-tooltip使用记录

记录工作中使用el-toolitp的情况

需求一：列表项内容超出限制时，点击单元格展示Tooltip

需求描述：某列表项内容返回过多，超出最大限制时：
1.点击该单元格再显示tooltip；
2.点击下一行更新tooltip内容；
3.重复点击，或且点击页面其他地方时，tooltip隐藏；
效果图如下：
在这里插入图片描述

1.实现步骤：

在这里插入图片描述
1.设置el-toolitp的触发方式为 click
2.设置该列的展示内容限制：超过两行时，超出部分显示省略号；

.text-ellipsis-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

el-tooltip的disabled作用是设置未超出最大宽高时不显示tooltip
3.点击事件：检查元素的实际总高度（scrollHeight）是否大于其可见高度（offsetHeight）并且标记当前点击的列；
在这里插入图片描述
注：
scrollHeight表示元素的总高度，包括溢出的部分
offsetHeight则是元素在页面上可见部分的高度

4.鼠标悬浮到该单元格时修改鼠标样式
在这里插入图片描述

需求二：toolitp内容分行，动态添加文字颜色标注

需求描述：在需求一的基础上，优化toolitp的展示内容
1.点击单元格时请求接口，后端返回解析好的内容
2.将内容分行展示重点内容添加颜色标注
效果图如下：
在这里插入图片描述

1.实现步骤

1.1 与后端约定结构化后的数据结构：
description的内容为一个段落需在结尾换行，多个段落组组成一整个内容
需要将description中括号的部分根据highlightConfig的value进行替换且添加colour的颜色
在这里插入图片描述
1.2 思路
1.Popover的show事件，在显示时请求接口获取需展示的数据
2.循环将需要替换的部分添加HTML内容，在每一段之后添加换行符,

itemHtmlList的内容：
key: 需要替换的部分
value: 经过处理后(添加颜色)最终要替换的结果
在这里插入图片描述
item.description替换后的内容:

将数组中description的内容使用<br>拼接成字符串

3.el-tooltip 添加 raw-content 解析HTML
在这里插入图片描述

2.问题及优化

2.1.文本换行问题

文本默认的断行方式会导致段落在未指定换行的位置自动换行，如下图：
在这里插入图片描述
解决方法： 修改word-break属性为break-all；

注：
word-break 是一个CSS属性，用于设置元素内部单词的断行规则。它有以下几个主要值：
normal：这是默认值，遵循浏览器的默认断行规则，通常在英文中不在单词内部断行，而在允许断行的字符（如空格或连字符）处断行；在中文中，可以在任何字符处断行。
break-all：强制在单词内部进行断行，如果单词太长而无法在一行内完全显示，那么它会在任何可能的位置断开，以适应容器的宽度。
keep-all：在英文中与normal类似，但在中文中会尽量避免在简体中文和日文中的全角字符间断行，保持单词的完整性。
break-word：单词太长时，会在单词内部的一个适合位置进行断行，但一般不会在正常单词内部断行，除非没有其他选择。
这个属性常用于处理不同语言的文本布局，尤其是当文本宽度有限或者需要自适应屏幕大小时。

2.2.请求接口时如果时间较长添加一个加载中的效果

el-tooltip内部没有loading效果，需要自己设置接口未加载完时展示的内容；
需要注意：
1.div中要使用v-html渲染内容
在这里插入图片描述
2.此时el-tooltip的位置会出现问题，靠右展示，鼠标滚动之后会正常；
v-html会导致内联元素被解析为HTML，这可能会影响el-tooltip内部的布局和定位算法。

解决方法：手动更新el-tooltip
1.使用ref来绑定el-tooltip, 这里的el-tooltip是v-for循环生成的
在这里插入图片描述
2.在DOM更新后，确保el-tooltip的引用（tooltipRef[row.id]）已经可用，然后调用updatePopper()方法来更新el-tooltip的定位