element plus el-table show-overflow-tooltip实现源码

2024-08-30 06:20

本文主要是介绍element plus el-table show-overflow-tooltip实现源码,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

element plus 2.7.2 版本

文件地址:packages/components/table/src/table-body/events-helper.ts

核心代码

const getPadding = (el: HTMLElement) => {const style = window.getComputedStyle(el, null)const paddingLeft = Number.parseInt(style.paddingLeft, 10) || 0const paddingRight = Number.parseInt(style.paddingRight, 10) || 0const paddingTop = Number.parseInt(style.paddingTop, 10) || 0const paddingBottom = Number.parseInt(style.paddingBottom, 10) || 0return {left: paddingLeft,right: paddingRight,top: paddingTop,bottom: paddingBottom,}}const handleCellMouseEnter = (event: MouseEvent,row: T,tooltipOptions: TableOverflowTooltipOptions) => {const table = parentconst cell = getCell(event)const namespace = table?.vnode.el?.dataset.prefixif (cell) {const column = getColumnByCell({columns: props.store.states.columns.value,},cell,namespace)if (cell.rowSpan > 1) {toggleRowClassByCell(cell.rowSpan, event, addClass)}const hoverState = (table.hoverState = { cell, column, row })table?.emit('cell-mouse-enter',hoverState.row,hoverState.column,hoverState.cell,event)}if (!tooltipOptions) {return}// 判断是否text-overflow, 如果是就显示tooltipconst cellChild = (event.target as HTMLElement).querySelector('.cell') as HTMLElementif (!(hasClass(cellChild, `${namespace}-tooltip`) &&cellChild.childNodes.length)) {return}/****从这里开始都是***/// 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#c3const range = document.createRange()range.setStart(cellChild, 0)range.setEnd(cellChild, cellChild.childNodes.length)/** detail: https://github.com/element-plus/element-plus/issues/10790*  What went wrong?*  UI > Browser > Zoom, In Blink/WebKit, getBoundingClientRect() sometimes returns inexact values, probably due to lost precision during internal calculations. In the example above:*    - Expected: 188*    - Actual: 188.00000762939453*/let rangeWidth = range.getBoundingClientRect().widthlet rangeHeight = range.getBoundingClientRect().heightconst offsetWidth = rangeWidth - Math.floor(rangeWidth)const { width: cellChildWidth, height: cellChildHeight } =cellChild.getBoundingClientRect()if (offsetWidth < 0.001) {rangeWidth = Math.floor(rangeWidth)}const offsetHeight = rangeHeight - Math.floor(rangeHeight)if (offsetHeight < 0.001) {rangeHeight = Math.floor(rangeHeight)}const { top, left, right, bottom } = getPadding(cellChild)const horizontalPadding = left + rightconst verticalPadding = top + bottomif (rangeWidth + horizontalPadding > cellChildWidth ||rangeHeight + verticalPadding > cellChildHeight ||cellChild.scrollWidth > cellChildWidth) {createTablePopper(tooltipOptions,cell.innerText || cell.textContent,cell,table)}}

这篇关于element plus el-table show-overflow-tooltip实现源码的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/1120026

相关文章

mybatis-plus QueryWrapper中or,and的使用及说明

《mybatis-plusQueryWrapper中or,and的使用及说明》使用MyBatisPlusQueryWrapper时,因同时添加角色权限固定条件和多字段模糊查询导致数据异常展示,排查发... 目录QueryWrapper中or,and使用列表中还要同时模糊查询多个字段经过排查这就导致只要whe

linux批量替换文件内容的实现方式

《linux批量替换文件内容的实现方式》本文总结了Linux中批量替换文件内容的几种方法,包括使用sed替换文件夹内所有文件、单个文件内容及逐行字符串,强调使用反引号和绝对路径,并分享个人经验供参考... 目录一、linux批量替换文件内容 二、替换文件内所有匹配的字符串 三、替换每一行中全部str1为st

SpringBoot集成MyBatis实现SQL拦截器的实战指南

《SpringBoot集成MyBatis实现SQL拦截器的实战指南》这篇文章主要为大家详细介绍了SpringBoot集成MyBatis实现SQL拦截器的相关知识,文中的示例代码讲解详细,有需要的小伙伴... 目录一、为什么需要SQL拦截器?二、MyBATis拦截器基础2.1 核心接口:Interceptor

SpringBoot集成EasyPoi实现Excel模板导出成PDF文件

《SpringBoot集成EasyPoi实现Excel模板导出成PDF文件》在日常工作中,我们经常需要将数据导出成Excel表格或PDF文件,本文将介绍如何在SpringBoot项目中集成EasyPo... 目录前言摘要简介源代码解析应用场景案例优缺点分析类代码方法介绍测试用例小结前言在日常工作中,我们经

基于Python实现简易视频剪辑工具

《基于Python实现简易视频剪辑工具》这篇文章主要为大家详细介绍了如何用Python打造一个功能完备的简易视频剪辑工具,包括视频文件导入与格式转换,基础剪辑操作,音频处理等功能,感兴趣的小伙伴可以了... 目录一、技术选型与环境搭建二、核心功能模块实现1. 视频基础操作2. 音频处理3. 特效与转场三、高

Python实现中文文本处理与分析程序的示例详解

《Python实现中文文本处理与分析程序的示例详解》在当今信息爆炸的时代,文本数据的处理与分析成为了数据科学领域的重要课题,本文将使用Python开发一款基于Python的中文文本处理与分析程序,希望... 目录一、程序概述二、主要功能解析2.1 文件操作2.2 基础分析2.3 高级分析2.4 可视化2.5

Java实现预览与打印功能详解

《Java实现预览与打印功能详解》在Java中,打印功能主要依赖java.awt.print包,该包提供了与打印相关的一些关键类,比如PrinterJob和PageFormat,它们构成... 目录Java 打印系统概述打印预览与设置使用 PageFormat 和 PrinterJob 类设置页面格式与纸张

使用Go实现文件复制的完整流程

《使用Go实现文件复制的完整流程》本案例将实现一个实用的文件操作工具:将一个文件的内容完整复制到另一个文件中,这是文件处理中的常见任务,比如配置文件备份、日志迁移、用户上传文件转存等,文中通过代码示例... 目录案例说明涉及China编程知识点示例代码代码解析示例运行练习扩展小结案例说明我们将通过标准库 os

MySQL 8 中的一个强大功能 JSON_TABLE示例详解

《MySQL8中的一个强大功能JSON_TABLE示例详解》JSON_TABLE是MySQL8中引入的一个强大功能,它允许用户将JSON数据转换为关系表格式,从而可以更方便地在SQL查询中处理J... 目录基本语法示例示例查询解释应用场景不适用场景1. ‌jsON 数据结构过于复杂或动态变化‌2. ‌性能要

Python实现终端清屏的几种方式详解

《Python实现终端清屏的几种方式详解》在使用Python进行终端交互式编程时,我们经常需要清空当前终端屏幕的内容,本文为大家整理了几种常见的实现方法,有需要的小伙伴可以参考下... 目录方法一:使用 `os` 模块调用系统命令方法二:使用 `subprocess` 模块执行命令方法三:打印多个换行符模拟