记一次ElementUI源码修改过程

本文记录了一次在使用ElementUI的el-tree组件时,因业务需求重写键盘上下键移动节点高亮的源码过程。通过Chrome DevTools定位到事件定义,从GitHub下载并修改ElementUI源码,然后重新打包上传至公司npm私服。在tree.vue中找到并修改了相应的代码逻辑,实现了业务需求。

开发板推荐:天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

修改目的

​ 使用ElementUI el-tree过程发现选中节点,键盘移动上下键时(key down\key up)el-tree默认高亮移动的节点,业务上需要重写此事件。

​ 从官网发现该事件没有暴露回调接口,故想到了修改elementui源码,重新打包上传到公司的npm私服。

tree

定位代码

​ 在chrome devtools的Elements选中节点,查看节点的EventListener中keydown事件,可以看到该事件在element-ui.common.js中定义。发现确实是elementui自行定义的事件响应,起初有怀疑时浏览器的默认行为类似tab键的功能。

image-20201008101517812

解决问题

ElementUI是开源项目,到github下载项目后修改源码,重新打包上传到私服解决问题。

git clone https://github.com/ElemeFE/element.git # 使用git下载源码
cd element & npm install #安装依赖

在源码的packages/tree/src/tree.vue中找到了对应的代码逻辑。
在这里插入图片描述

​ 我们查看源码后,修改成我们业务上需要的效果,或者直接简单的注释掉这一行代码。在package.json修改公司内部的element-ui版本号。

npm run dist #重新打包
npm publish --registry=http://xxx.xx/xx #发布到公司私服

以上就是本博文的全部内容,如果对你帮助的话,点赞、评论、转发三连

更多资源与第一手博客,请关注公众号:程序员众推,获取。
在这里插入图片描述

开发板推荐:天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员众推

谢谢老铁鼓励

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值