element-plus 工作经验总结

news/2024/12/14 12:21:00/

Element-plus

文章目录

  • Element-plus
    • 忠告: 最好锁定版本, 免得更新更出 BUG 来了
    • el-drawer 设置 modal="false" 后, 遮罩元素仍存在, 点不了空白的地方
    • el-tree 大数据量时接收 check-change 事件报错导致涉及多个节点的操作没执行完毕
    • el-table 表头 show-overflow-tooltip 无效解决办法 / 设置 class 控制全局超长隐藏, 以 el-tooltip 显示全部内容

忠告: 最好锁定版本, 免得更新更出 BUG 来了

遇到两次了, 没锁定 element-plus 版本, 打包后样式乱了, 逻辑变了…

el-drawer 设置 modal=“false” 后, 遮罩元素仍存在, 点不了空白的地方

有两个思路:

  1. 通过 modal-class 把遮罩层样式改了, 让它只是看起来不显示, 这样 close-on-click-modal 应该能生效
    这个方案改动小, 但是满足不了产品需求 — “点击其他表格行时, 可切换侧滑页内容”, 于是引入 vueuse 的 onClickOutside 做了方案 2
  2. 方案2, 步骤如下:
    1. 给 drawer 和 modal 加上 pointer-events 相关 class , 让点击可以穿透遮罩层
    2. 使用 onClickOutside, 传入 handler 函数关闭 drawer , 传入 options.ignore , 指定忽略表格行(侧滑页的入口元素)的 css 选择器
    3. 如果 drawer 内部有弹框, 可以加上弹框遮罩的 class 选择器, 避免点击弹框时把 drawer 也关了

el-tree 大数据量时接收 check-change 事件报错导致涉及多个节点的操作没执行完毕

背景:

数据量大的时候(选中一个底下有很多子级的节点)check-change 事件不断触发, 到了 100 出头时, 接收事件处理的方法就一直报错了(发版后不报错, 但逻辑同样受影响), 不会处理后续逻辑了

定位:

本地运行开发环境里有报错, 错误信息里说的是数据更新影响到渲染了, 那就减少相关操作吧

解决

于是在接收处首先 await nextTick() 一下, 攒够一波了一起执行后续逻辑 -> 更新数据 -> 视图更新

如果之后还有问题, 那再整 setTimeout , 队列之类的吧, 或者干脆不用 check-change 事件了

el-table 表头 show-overflow-tooltip 无效解决办法 / 设置 class 控制全局超长隐藏, 以 el-tooltip 显示全部内容

背景:

UI 要求表头也要超长隐藏, 鼠标移入 tooltip 显示全局内容

思路:

之前的项目是用 render-header 实现的, 新项目用 render-heade 少, 觉得逐个表格写 render-header 控制显隐/ title 属性太麻烦, 于是复制 element-plus 的 show-overflow-tooltip 部分相关代码, 实现设置 class “showOverflowTooltip” 即可超长显示 tooltip (设置 class 就行, 跟表格没关系, 普通 div 设置了也能显示), 原理为 — 全局监听 .showOverflowTooltip mouseover , 以虚拟 ref 显示全局 el-tooltip ,

具体代码

// APP.VUE<template><!-- ... --><!-- 全局 tooltip --><el-tooltipv-model:visible="visible":content="content"placement="top-start"effect="dark"trigger="hover":show-after="500"virtual-triggering:virtual-ref="triggerRef"></el-tooltip>
</template><script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { checkIsOverflow } from 'src/utils/dom.js';// ...// 全局, 以虚拟 ref 触发指定 class (.showOverflowTooltip) 鼠标移入显示 overflow tooltip
// 手动控制显隐(暂时没用到)
const visible = ref(false);
// tooltip 内容
const content = ref('');
// 虚拟 ref 指定 DOM
const triggerRef = ref(null);
// 全局监听 mouseover 鼠标移入, 控制虚拟 ref
const globalOnMouseOver = e => {const targetEl = e.target;// 鼠标移入的元素包含特定 class + 内容超出, 则设置虚拟 ref + content (popper 以 trigger: hover 显示)if (targetEl.classList.contains('showOverflowTooltip') && checkIsOverflow(targetEl)) {content.value = targetEl.innerText || targetEl.textContent;triggerRef.value = targetEl;}
};// 添加事件监听
onMounted(() => {document.getElementById('vue应用根元素id').addEventListener('mouseover', globalOnMouseOver);
});// 移除事件监听
onBeforeUnmount(() => {document.getElementById('vue应用根元素id').removeEventListener('mouseover', globalOnMouseOver);
});
</script><style lang="scss">.showOverflowTooltip, .showOverflowTooltip > * {max-width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
</style>
// src/utils/dom.js// 判断是否 text-overflow
// 参考 element-plus : https://github.com/element-plus/element-plus/blob/dev/packages/components/table/src/table-body/render-helper.ts
export const checkIsOverflow = (el) => {// 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(el, 0);range.setEnd(el, el.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 { width: rangeWidth, height: rangeHeight } = range.getBoundingClientRect();const offsetWidth = rangeWidth - Math.floor(rangeWidth);const { width: cellChildWidth, height: cellChildHeight } = el.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(el);const horizontalPadding = left + right;const verticalPadding = top + bottom;if (rangeWidth + horizontalPadding > cellChildWidth ||rangeHeight + verticalPadding > cellChildHeight ||el.scrollWidth > cellChildWidth) {return true;}return false;
};
// 获取 el padding
export const getPadding = (el) => {const style = window.getComputedStyle(el, null);const paddingLeft = Number.parseInt(style.paddingLeft, 10) || 0;const paddingRight = Number.parseInt(style.paddingRight, 10) || 0;const paddingTop = Number.parseInt(style.paddingTop, 10) || 0;const paddingBottom = Number.parseInt(style.paddingBottom, 10) || 0;return {left: paddingLeft,right: paddingRight,top: paddingTop,bottom: paddingBottom};
};export default {checkIsOverflow,getPadding
};

http://www.ppmy.cn/news/1461850.html

相关文章

Linux---编辑器vim的认识与简单配置

前言 我们在自己的电脑上所用的编译软件&#xff0c;就拿vs2022来说&#xff0c;我们可以在上面写C/C语言、python、甚至java也可以在上面进行编译&#xff0c;这种既可以用来编辑、运行编译&#xff0c;又可以支持很多种语言的编译器是一种集成式开发环境&#xff0c;集众多于…

软件设计师笔记和错题

笔记截图 数据库 模式是概念模式 模式/内模式 存在概念级和内部级之间&#xff0c;实现了概念模式和内模式的互相转换 外模式/模式映像 存在外部级和概念级之间&#xff0c;实现了外模式和概念模式的互相转换。 数据的物理独立性&#xff0c; 概念模式和内模式之间的映像…

WordPress原创插件:超链接点击访问统计

WordPress原创插件&#xff1a;超链接点击访问统计 https://download.csdn.net/download/huayula/89296775

DockerFile介绍与使用

一、DockerFile介绍 大家好&#xff0c;今天给大家分享一下关于 DockerFile 的介绍与使用&#xff0c;DockerFile 是一个用于定义如何构建 Docker 镜像的文本文件&#xff0c;具体来说&#xff0c;具有以下重要作用&#xff1a; 标准化构建&#xff1a;提供了一种统一、可重复…

Shell脚本——批量清理Kubernetes集群中Evicted状态的pod

测试环境有一台宿主机出现了异常&#xff0c;大量的异常日志导致宿主机的磁盘使用率超过了85%&#xff0c;触发了上面的pod驱离策略&#xff0c;该宿主机上的的pod处于Evicted状态。在清理了磁盘之后&#xff0c;得手动处理掉这些Evicted状态的pod。 #!/bin/bash# 获取当前状态…

HCIP【VLAN综合实验】

目录 一、实验拓扑图&#xff1a; 二、实验要求&#xff1a; 三、实验思路&#xff1a; 四、实验步骤&#xff1a; 1、在交换机SW1,SW2,SW3配置VLAN和各个接口对应类型的配置 2、在路由器上面配置DHCP服务 一、实验拓扑图&#xff1a; 二、实验要求&#xff1a; 1、PC1 …

数据结构-二叉树-红黑树

一、红黑树的概念 红黑树是一种二叉搜索树&#xff0c;但在每个节点上增加一个存储位表示节点的颜色&#xff0c;可以是Red或者BLACK&#xff0c;通过对任何一条从根到叶子的路径上各个节点着色方式的限制&#xff0c;红黑树确保没有一条路径会比其他路径长出两倍&#xff0c;…

遥感数据集制作(Potsdam数据集为例):TIF图像转JPG,TIF标签转PNG,图像重叠裁剪

文章目录 TIF图像转JPGTIF标签转PNG图像重叠裁剪图像重命名数据集转COCO格式数据集转VOC格式 遥感图像不同于一般的自然图像&#xff0c;由于波段数量、图像位深度等原因&#xff0c;TIF图像数据不能使用简单的格式转换方法。本文以Potsdam数据集为例&#xff0c;制作能够直接用…