vue+elemen实现el-tooltip在文本超出区域后浮现
作者：sgabon
前言
最近在做一个vue+element的项目，遇到的一些难搞的需求。
关于<el-tooltip>的使用想必也不用我多说了，官方文档是相当的详细，基本使用自己去饿了么官网看。
具体需求
由于我的内容是循环生成的，字体的多少，并不是一个定值，如果仅使用官方的<el-tooltip>组件的话，岂不是包着的每一个div都会有这个tooltip，结果导致一整个页面的tooltip，体验特别不好。而且整个页面生成了上百个<el-tooltip>标签，占用了大量的资源。
解决方案
方案一
刚开始在网上翻找解决方案，找到一个别人将tooltip组件二次封装，好用确实是好用，但是同样会生成大量的tooltip标签，遂放弃。
方案二
后来，我想到了一个我用过的表格属性——:show-overflow-tooltip=“true”——在表格组件中，某一个单元格中的内容超过了该单列的列宽，会隐藏多余部分，通过…展示。并且将鼠标移入即可查看该单元格内的完整内容。效果如图：
而鼠标放到文字没超出列宽的地方则不显示 tooltip，神奇的是，整个页面，只生成了一个<el-tooltip>标签，无论有多少内容，永远只有一个<el-tooltip>存在，大大节省了资源。于是翻看源码看他是怎么实现该功能的。
具体方法
1.先在页面上定义一个tooltip标签
<el-tooltip ref="tooltip" :content="tooltipContent" />
此标签就是要在页面中生成的那个唯一的<el-tooltip>标签。
2.在文字区域的父标签上添加鼠标移入移除方法
<div
class="card-carousel--card--footer"
@mouseenter="handleDivMouseEnter($event)"
@mouseleave="handleDivMouseleave($event)"
>
<p class="topicStyle"> {{ info } </p>
</div>
前提是：承载内容的标签需要有一个class。若要在组件标签上添加方法，应该是要添加【.native】的。
3.引入需要的方法
import debounce from 'throttle-debounce/debounce'
import { getStyle } from '@/utils/dom.js
在created中添加
created() {
this.activateTooltip = debounce(50, tooltip => tooltip.handleShowPopper())
},
此处getStyle方法是自动计算边距，我将源码中的js提出来，方便使用。
源码位置：\element-dev\packages\table\src\table-body.js
4.在methods添加鼠标移入移出方法
// 鼠标移入
handleDivMouseEnter(event) {
const target = event.target
// 判断是否text-overflow, 如果是就显示tooltip
let child = target.querySelector('.groupItemClass')
// 在此处我一共有三个class控制三块class，这一块主要是对<el-menu>以及文本区域控制，所以class要有多个。
// 如果区域宽度被限定，则通过高度判断
let heightFlag = false
if (!child) {
child = target.querySelector('.setItemClass')
if (!child) {
// 文本区域
child = target.querySelector('.topicStyle')
}
}
if (child.scrollHeight > child.offsetHeight) {
heightFlag = true
}
// use range width instead of scrollWidth to determine whether the text is overflowing
// to address a potential FireFox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1074543#c3
const range = document.createRange()
range.setStart(child, 0)
range.setEnd(child, child.childNodes.length)
const rangeWidth = range.getBoundingClientRect().width // 文本区域宽度
const padding = (parseInt(getStyle(target, 'paddingLeft'), 10) || 0) +
(parseInt(getStyle(target, 'paddingRight'), 10) || 0)
if ((rangeWidth + padding > target.offsetWidth || child.scrollWidth > child.offsetWidth) || heightFlag && this.$refs.tooltip) {
const tooltip = this.$refs.tooltip
// TODO 会引起整个 Table 的重新渲染，需要优化
this.tooltipContent = target.innerText || target.textContent
tooltip.referenceElm = target
tooltip.$refs.popper && (tooltip.$refs.popper.style.display = 'none')
tooltip.doDestroy()
tooltip.setExpectedState(true)
this.activateTooltip(tooltip)
}
}
// 鼠标移出
handleDivMouseleave(event) {
const tooltip = this.$refs.tooltip
if (tooltip) {
tooltip.setExpectedState(false)
tooltip.handleClosePopper()
}
},
效果展示
而且在页面中只生成一个<el-tooltip>标签。
根据不同的情况可以通过判断宽度和高度，对自己的页面进行一定的兼容，对方法handleDivMouseEnter()进行相应的修改。
到此这篇关于vue+elemen实现el-tooltip在文本超出区域后浮现的文章就介绍到这了,更多相关elemen el-tooltip文本超出浮现内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！