记一次ElementUI源码修改过程

    记一次修改ElementUI el-tree源码,并重新打包上传到公司私服过程。

修改目的

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

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

记一次ElementUI源码修改过程


定位代码

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

记一次ElementUI源码修改过程


解决问题

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

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

    在源码的packages/tree/src/tree.vue中找到了对应的代码逻辑。

记一次ElementUI源码修改过程


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

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


原文始发于微信公众号(编程异次元):记一次ElementUI源码修改过程

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/235264.html

(0)
小半的头像小半

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!