element-plus 工作经验总结

Element-plus

忠告: 最好锁定版本, 免得更新更出 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-tooltip
        v-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#c3
    const 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
};

el-table 大数据量表格, 操作卡顿(修改源码可缓解)

背景:

选项集设置, 选项数量不限, 支持拖动排序, 导致客户添加了上千个选项, 单个选项可点编辑按钮进行行内编辑(文字变为输入框), 客户点击后反应特别慢, 要一两秒才切换为输入框

定位:

使用浏览器调试工具中的"performance/性能"功能, 看看点击时发生了什么 — 点击改变某一行的数据 edit status 为 true 后, 不断触发 el-table 的 wrappedRowRender 函数, 定位到源码打断点再次操作, 发现是实打实地在执行上千行数据的重新 render , 离谱, 这一行数据改变居然重新渲染全部行数据…

思路:

  1. 根据一顿操作,我把 Table 组件性能提升了十倍的思路, 对 element-plus 源码进行改造, 缓存已渲染的 row (vNode) 和 row (data) , 在 wrappedRowRender 执行之前, 判断是否存在旧 row (data) 以及它是否有变动, 无变动则直接使用缓存的 row (vNode)

    实际感觉, 快了, 但体验不明显, 应该还需要优化, 放弃, 直接转 2

  2. 问产品能否改交互, 不能, 则直接改 ul list 仿表格样式实现, 反正这个表格比较简单

    这个主要是这种场景太少了, 其他大数据量表格都用 el-table-v2 虚拟滚动表格了, 也没有重复渲染这个问题

element-plus 二次开发, 打包后无法使用报错

背景:

为解决上千行的表格, 随便执行一个操作都会导致整个表格重新渲染问题, 根据一顿操作,我把 Table 组件性能提升了十倍的思路, 对 element-plus 进行改造, 之后使用本地包打包办法如何使用自定义的Element-Plus组件,直接手改源码使用本地调试, 发现接口报错, 开始报错Module not found: Error: Package path ./lib/el-message is not exported from package这类错误, 误以为是按需引入导致, 改为全量引入, 之后仍报错Cannot destructure property 'row' of 'undefined' as it is undefined.这类错误, 最终根据你真的了解 ElementPlus 的按需导入吗?的说法, 老老实实去找unplugin-vue-components/resolvers/ElementPlusResolver源码, 推测可能是 version 导致, 结果确实如此

解决办法:

将 element-plus 源码中 packages/element-plus/package.json 文件的 version 从 ‘0.0.0-dev.1’ 改为更高版本, 我是直接基于拉取代码的真实版本 ‘2.7.7’ 新增了后缀’-custom’, ‘2.7.7-custom’, 方便知道代码是从 element-plus 哪个版本拉取的, 方便后续同步

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值