修改目的

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

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

定位代码

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

解决问题

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 #发布到公司私服

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

更多资源与第一手博客,请关注公众号:程序员众推,获取。

记一次ElementUI源码修改过程的更多相关文章

  1. elementUI源码修改定制

    1.修改elementUI源码 首先从Git上克隆代码或者下载代码包 进入文件夹打开终端或Git Bash Here,运行npm install 安装依赖包.npm run dev 打开网页http: ...

  2. el-upload源码修改跳坑

    之前给element-ui提了一个问题,结果没有鸟我,没办法,只能修改源码来满足需求了 (备注:element-ui2依然没有修改,为了迎合产品还是要改源码) 本文讨论的组件属性仅限于list-typ ...

  3. Java学习-039-源码 jar 包的二次开发扩展实例(源码修改)

    最近在使用已有的一些 jar 包时,发现有些 jar 包中的一些方法无法满足自己的一些需求,例如返回固定的格式,字符串处理等等,因而需要对原有 jar 文件中对应的 class 文件进行二次开发扩展, ...

  4. Ubuntu 14.04 LTS 下 android 2.3.5 源码编译过程

    Ubuntu 14.04 LTS 下 android 2.3.5 源码编译过程   在新的Ubuntu 64位系统下去编译早期的安卓源码是会出现很多问题的,因为64位系统在安装完成后,很多32位的兼容 ...

  5. Android6.0 源码修改之屏蔽系统短信功能和来电功能

    一.屏蔽系统短信功能 1.屏蔽所有短信 android 4.2 短信发送流程分析可参考这篇 戳这 源码位置 vendor\mediatek\proprietary\packages\apps\Mms\ ...

  6. openfire源码修改后如何打包部署到linux服务器上

    原文:http://blog.csdn.net/jinzhencs/article/details/50457152 1.linux版本的3.10.3解压部署启动(过程略,参考我的另一篇博文http: ...

  7. vue打包时,assets目录 和static目录下文件的处理区别(nodeModule中插件源码修改后,打包后的文件应放在static目录)

    为了回答这个问题,我们首先需要了解Webpack如何处理静态资产.在 *.vue 组件中,所有模板和CSS都会被 vue-html-loader 及 css-loader 解析,并查找资源URL.例如 ...

  8. 05.ElementUI源码学习:项目发布配置(github pages&npm package)

    0x00.前言 书接上文.项目第一个组件已经封装好,说明文档也已编写好.下面需要将说明文档发布到外网上,以此来展示和推广项目,使用 Github Pages功能实现.同时将组件发布之 npm 上,方便 ...

  9. python的paramiko源码修改了一下,写了个操作命令的日志审计 bug修改

    python的paramiko源码修改了一下,写了个操作命令的日志审计,但是记录的日志中也将backspace删除键记录成^H这个了,于是改了一下代码,用字符串的特性. 字符串具有列表的特性 > ...

随机推荐

  1. 元素的生于死(python里元素获取与删除)

    今天被个元素烦着了,找了下网上也没啥直接详细的方法 就总结了下今天找过的方法,分享些简单的方法 直接放干货 删除篇 要删除列表元素的首次出现,只需要list.remove >>> a ...

  2. PJSIP开发指南

    一.通用设计 1.1   架构 1.1.1        通信图 下面的图展示了SIP消息在PJSIP组件间从后端到前端如何传递的. 1.1.2        类图 下面的图显示类视图 1.2   E ...

  3. 获取android手机的屏幕分辨率 android开发

    /** * 获取屏幕分辨率 */ private void getResolution() { // TODO Auto-generated method stub Display display = ...

  4. 2020年B2B外贸建站的终极教程

    本文目标:按照本建站教程的顺序操作,能够实现:基于全球份额最大的建站系统“wordpress”,从零搭建一个B2B外贸网站,且建站成本每年小于1000元(如果不计算自己投入的人力成本的话). 模板站点 ...

  5. pybind11: C++ 工程如何提供 Python 接口

    C/C++ 工程提供 Python 接口,有利于融合进 Python 的生态.现在 Python 在应用层,有其得天独厚的优势.尤其因为人工智能和大数据的推波助澜, Python 现在以及未来,将长期 ...

  6. Jira + confluence

    Jira入门教程 敏捷开发管理(一) https://www.jianshu.com/p/145b5c33f7d0 https://www.jianshu.com/p/975385878cde JIR ...

  7. Mybatis源码学习第八天(总结)

    源码学习到这里就要结束了; 来总结一下吧 Mybatis的总体架构 这次源码学习我们,学习了重点的模块,在这里我想说一句,源码的学习不是要所有的都学,一行一行的去学,这是错误的,我们只需要学习核心,专 ...

  8. Agumaster添加股票日交易爬虫画面

  9. HTTP 协议类

    HTTP 协议的主要特点 简单快速:每个资源的URL是固定的 灵活:在每个 http 协议中都有一个头部分有一个数据类型,通过一个 http 协议就可以完成不同数据类型的传输 无连接:连接一次就好断掉 ...

  10. HTML -- 表单元素1

    HTML 表单用于搜集不同类型的用户输入. 一.<form> 标签 <form> 标签用于为用户输入创建 HTML 表单. 表单能够包含 input 元素,比如文本字段.复选框 ...