修改目的

使用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. Apache Tika实战

    Apache Tika实战 Tika 简介 Apache Tika 是一个内容分析工具包,可以检测上千种文件类型,并提取它们的元数据和文本.tika在设计上十分精巧,单一的接口使它易于使用,在搜索引擎 ...

  2. 单表千万行数据库 LIKE 搜索优化手记

    我们经常在数据库中使用 LIKE 操作符来完成对数据的模糊搜索,LIKE 操作符用于在 WHERE 子句中搜索列中的指定模式. 如果需要查找客户表中所有姓氏是“张”的数据,可以使用下面的 SQL 语句 ...

  3. Android开发之设置应用设置全屏的两种解决方法 兼容android5.0等两种解决方法

    在开发中我们经常需要把我们的应用设置为全屏,有两种方法,一中是在代码中设置,另一种方法是在配置文件里改! 一.在代码中设置:  代码如下: package com.android.tutor; imp ...

  4. Mongos WoW

    http://blog.csdn.net/yuleslie/article/details/7430094 https://github.com/mangostwo/ https://www.getm ...

  5. laravel5Eloquent模型与数据表的创建

    下面是有关管理员模型与表的创建 生成模型时同时生成数据库迁移文件 在生成的迁移文件中添加字段 运行命令行生成数据表 命令进行混合运用 生成工厂文件,数据填充文件 工厂模型代码 数据填充文件代码 数据填 ...

  6. 【Nginx】面试官:给我讲讲Nginx如何实现四层负载均衡?

    写在前面 这次又被问到Nginx四层负载均衡的问题了,别慌,我们一起来细细分析这个看似简单的问题. 如果文章对你有点帮助,请关注 冰河技术 微信公众号,点赞.在看.留言和转发,大家的四连是我持续创作的 ...

  7. Zookeeper源码解读

    1.1. 客户端源码 1.1.1. 总体流程 启动客户端 zkCli.sh文件里面的配置 实际运行 public static void main(String args[]) throws Keep ...

  8. 详细教程丨使用Prometheus和Thanos进行高可用K8S监控

    本文转自Rancher Labs 介 绍 Prometheus高可用的必要性 在过去的几年里,Kubernetes的采用量增长了数倍.很明显,Kubernetes是容器编排的不二选择.与此同时,Pro ...

  9. apply用法

    result.push.apply(result, document.getElementsByTagName(tag)); 但是,这里为什么要用apply呢? 因为document.getEleme ...

  10. Redis之命令详解

    Redis命令手册:http://doc.redisfans.com/