ElementUI 源码定制防坑指南】的更多相关文章

背景 我司OA系统公文管理模块Office在线编辑使用的是金格IWebOffice中间件[PPAPI插件,通过<object>标签加载],IWebOffice在chrome中设置div盒子的css样式display:none会造成控件的奔溃,出现空白等异常情况.用过ElementUI的都知道Tabs标签页,标签之间切换用的正是display属性,笔者要改的是使用width:0px;height:0px;opacity:0;visibility:hidden;做标签的切换. Fork eleme…
1.修改elementUI源码 首先从Git上克隆代码或者下载代码包 进入文件夹打开终端或Git Bash Here,运行npm install 安装依赖包.npm run dev 打开网页http://localhost:8085/,会看到elementUI首页 进入element文件夹,packages文件夹里的各个组件文件夹就是我们要修改的源码文件夹 比如我们进入 button文件夹里面的src文件,找到button.vue,我们修改class="el-button",添加cla…
写在前面 最近项目经理要求将原先项目中的日志配置logBack,修改为log4j2,据说是log4j2性能更优于logback,具体快多少,网上有说快10多倍,看来还是很快的,于是新的一波挑战又开始了,网上查找各种资料,官方文档各种啃,最终实现了迁移,所以,鉴于此,特记录一下,谨防遗忘. SpringBoot整合log4j2进行日志配置及防坑指南 1.Log4j2优点 具体优点可以参考官方文档:https://logging.apache.org/log4j/2.x/ 我这边只简单说一下: 相比…
我是风筝,公众号「古时的风筝」,一个不只有技术的技术公众号,一个在程序圈混迹多年,主业 Java,另外 Python.React 也玩儿的 6 的斜杠开发者. Spring Cloud 系列文章已经完成,可以到 我的github 上查看系列完整内容.也可以在公众号内回复「pdf」获取我精心制作的 pdf 版完整教程. 4月22日,阿里巴巴发布了泰山版<Java 开发手册>,以前以为终极版就真的是终极版了,没想到还是想的太简单了,继终极版之后又发布了详尽版.华山版,这不,泰山版又来了.想想也对,…
可视化一路走来,体会很多:博客一路写来,收获颇丰:代码一路码来,思路越来越清晰.终究还是明白了一句古话:纸上得来终觉浅,绝知此事要躬行. 跌跌撞撞整合了个可视化小tool,零零碎碎结交了众多的志同道合之人,迷迷糊糊创建了我"可视化/Prefuse"的QQ群,详情可查看左侧的公告部分.此群旨在结实更多的可视化领域的同仁,也希望可以成为一个开源项目分享与阅读的平台.源于开源,开源为我们提供了助我们快速成长的养分,开源的每一行代码都是前辈们心血的结晶,开源是智慧的浓缩. 在博客园写博客也是如…
用Scratch2.0源码定制一个自己的编辑器,换成自己的软件名称和图标,添加中文字体,修复汉化错误等等1.准备:下载Scratch2.0源码.安装开发工具Adobe Flash Builder4.7.SDK.Scratch2.0源码下载地址:https://github.com/LLK/scratch-flash 2.所需材料:①图标文件(可以是png图片文件,大小128*128.48*48.32*32.16*16),可以看Scratch官方版安装文件夹中“icons”文件夹中的图标文件②复制…
LineageOS源码定制手机系统 导语: 现在市场的手机基本就两种:  苹果机和android机. 今天我们不谈苹果机, 对小编我来讲,那是个奢侈品, android是我的最爱.对于一般android手机用户来说,操作系统都是手机厂商(小米,华为...)自带的,或者通过使用第三方(刷机精灵,...)刷新的.这些手机都有一个特别不好的地方,就是有很多预装软件,无法卸载,甚至系统中包含一些恶意软件,病毒,偷窥你的隐私,窃取你的数据. 很多android手机用户对此表示忧虑, 这种忧虑本省就是原因在…
position: sticky 防坑指南:https://www.jianshu.com/p/e217905e8b87 今天在写小程序项目的时候碰到一个需求是要把轮播图下面的标签栏滑动到顶部后固定,类似网易考拉小程序这种效果:   image.png ,刚开始是准备使用,js计算距离顶部高度,然后使用position:fixed,来实现的.在使用scroll-view,计算scrollTop的值,当scrollTop大于190时,添加样式position:fixed,但是这个方法在真机测试的时…
修改目的 使用ElementUI el-tree过程发现选中节点,键盘移动上下键时(key down\key up)el-tree默认高亮移动的节点,业务上需要重写此事件. ​从官网发现该事件没有暴露回调接口,故想到了修改elementui源码,重新打包上传到公司的npm私服. 定位代码 ​ 在chrome devtools的Elements选中节点,查看节点的EventListener中keydown事件,可以看到该事件在element-ui.common.js中定义.发现确实是element…
0x00.前言 书接上文.项目第一个组件已经封装好,说明文档也已编写好.下面需要将说明文档发布到外网上,以此来展示和推广项目,使用 Github Pages功能实现.同时将组件发布之 npm 上,方便直接在项目中安装使用. 0x01.Github Pages发布 进入项目的 Github repo,点击右上角的 Settings 选项. 点击左侧菜单的 Pages 选项,右侧显示项目 Github Pages 初始配置.source 配置项值为 None 说明此功能尚未开启. 点击 source…
ElementUI 作为当前运用的最广的 Vue PC 端组件库,很多 Vue 组件库的架构都是参照 ElementUI 做的.作为一个有梦想的前端(咸鱼),当然需要好好学习一番这套比较成熟的架构. 目录结构解析 首先,我们先来看看 ElementUI 的目录结构,总体来说,ElementUI 的目录结构与 vue-cli2 相差不大: .github:存放贡献指南以及 issue.PR 模板,这些是一个成熟的开源项目必须具备的. build:毫无疑问,看文件夹名称就知道是存放打包工具的配置文件…
提要 Vue2.0+Vuex+ElementUI是现在很多项目都在使用的BS软件的开发组合. Vue相较于Angular具有学习成本低,上手快以及组件轻量化的特点:相较于React,其官方提供的很多指令以及可以自定义的指令能够为让开发更加高效.并且相较于React生命周期监听所有props和state的变化,Vue中提供的watch方法监听单个数据的变化,能够更加直观的进行数据操作. 需要修改源码的项目需求 需要修改源码的项目需求总共有两处: ElementUI提供的树型组件的CheckBox需…
纯吐槽 大半夜也真是够了,想学着jQ造个小轮子巩固下js,结果一开始就卡住了. 虽然之前也看过源码,但是主要是研究方法实现什么的,对于框架主函数和入口结构不怎么熟悉,于是想着一步一步调试看看. $('#div') 简单吧,为了方便调试看过程,直接调用选择符,而且是一个ID,可以快速匹配调用原生方法. 大概流程是这样的. var version = "3.1.1", // Define a local copy of jQuery jQuery = function(selector,…
Carousel 走马灯源码解析 1. 基本原理:页面切换 页面切换使用的是 transform 2D 转换和 transition 过渡 可以看出是采用内联样式来实现的 举个栗子 <div :style="'transform: translateX('+ translate +'px);'"> </div> data() { return { translate: 0 }; } 是不是感觉自己已经可以写个轮播图了 骚年莫慌 现在来看源码 main.vue &…
之前给element-ui提了一个问题,结果没有鸟我,没办法,只能修改源码来满足需求了 (备注:element-ui2依然没有修改,为了迎合产品还是要改源码) 本文讨论的组件属性仅限于list-type='picture-card' ​ 现在的问题是这样的: ​ element-ui中有一个upload组件,可以上传图片或文件.该组件有很丰富的钩子函数与配置,但是没有一个限制上传图片数量(即使是按钮禁用)的方法,于是我就自己封装了一下: <el-upload :disabled='is_max'…
1.克隆ElementUI官方仓库代码到本地  https://github.com/ElemeFE/element 2.在cmd命令行安装依赖 1)找到代码文件夹 cd element 2)npm install     npm run dev 3.依赖包安装成后在 默认会在 http://localhost:8085/打开本地网页,会看到element首页 4.进入element文件夹,packages文件夹就是我们要修改源码的目录文件夹 5.找到src文件进行修改 6.命令行执行npm r…
由于项目需要定制开发kibana,因此需要编译kibana,在开发环境下运行.   注意:必须下载kibana 5.5的源码才能正常编译,下载release或者snapshot版本是不行的,运行npm start会因为无scripts目录报错.     Setting Up kibana Development Environment Fork, then clone the kibana repo and change directory into it 下载kibana5.5源码解压后 cd…
公司介绍:我们是专业的IM服务提供商!哇呼Chat是一款包含android客户端/ios客户端/pc客户端/WEB客户端的即时通讯系统.本系统完全自主研发,服务器端源码直接部署在客户主机.非任何第三方IM通讯平台! 功能全面:支持推送.多终端登录.历史消息.数据统计,可扩展位置分享.已读标记.输入中… 1.即时消息/单聊:基础功能,文字.图片.表情.语音.文件等,可基于手机联系人.通过通讯录.原有用户及好友关系进行通讯满足用户间的即时沟通. 2.群组:灵活的创建方式.丰富的权限及管理功能提供群组…
地址:https://referencesource.microsoft.com/#System.Web/HttpPostedFile.cs 微软的源码可以在这里看. ---------------------------- 标题:c#编程指南 地址:https://docs.microsoft.com/zh-cn/dotnet/csharp/programming-guide/index -------------------------------------- 可以下载一些代码示例参考 这…
前言 经常我们会遇到elementUI组件库期间有5%达不到我们想要的需求,第一我们重新写组件,第二我们改源码 安装element https://github.com/ElemeFE/element.git 新建组件 1.packages文件夹中新建alertText/src/main.vue <template> <div> <div>新增alertText组件测试</div> <input :type="typeInput"…
前言 指令(directive)在 vue 开发中是一项很实用的功能,指令可以绑定到某一元素或组件,使功能的颗粒度更精细.今天在翻 element-ui 的源码时,发现一个还挺实用的工具指令,跟大伙分享一下. clickoutside 的使用及效果 该指令的源码在 src/utils 下的 clickoutside.js.它功能是指令需要接收一个函数,当用户鼠标点击的区域在绑定指令的元素之外时,会触发该函数. 那么使用这个指令能够实现什么功能呢?我想到一个功能,就像我们常用的抽屉组件,在点击抽屉…
因为在忙其他事情好久没有更新iview的源码,也是因为后面的一些组件有点复杂在考虑用什么方式把复杂的功能逻辑简单的展示出来,还没想到方法,突然想到element的组件基本也差不多,内部功能的逻辑也差不多,就一起来看源码,element用的css预处理器是sass. 项目结构 build:放置webpack的配置文件. examples:放置element api的页面文档. packages:放置element的组件(css样式放置在这个目录下theme-chalk下). src/directi…
好用的版本: cmake-3.6.1-win64-x64  +  vs2015  + qt-opensource-windows-x86-msvc2015_64-5.7.0   +   obs-studio ((20.0.1)) 一直编译不过的的原因: 下载的源码为最新的 obs-studio(23.0.1,22.0.1)这些在cmake3.11下都不行,cmake会有警告 在cmake3.6下,obs-studio(23.0.1,22.0.1)编译会出错,大概的意思就是要出错的cpp文件里最上…
在阅读unpv1时运行源代码的环境配置,这里简单记录一下 源代码里的README 写得挺详细的,但是在Linux 系统的下还没没办法直接编译通过的, 这里我使用的是ubuntu 19.10(在腾讯云18.04 Server 18.04.1也测试通过) 以下是简单的步骤: 1.下载源码并解压 2.解压源代码后得到unpv13e, 3.开始编译 cd unpv13e ./configure cd lib make cd ../libfree make 这时报错:inet_ntop.c: In fun…
打算开始研究Spring源码,于是照着书上的指导从网上下载了Spring5.0.2版本和Gradle4.0(必须JDK1.8.60以上),本地编译的时候没有任何问题,就是导入Idea的时候一直报下面这个错: 在网上查了很多资料,有说JKD版本太低,有说Gradle版本不对等等,都试过之后依然报这个错,仔细看了下错误日志,注意到Connect to127.0.0.1:1080 failed,在网上查了后说把gradle.properties中代理配置注释掉,但我的gradle.properties…
书接上文,接下来项目将引入babel支持ES6+语法兼容. Babel 是一个工具链,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中.中文官网 0x00.babel概念 Babel 是一个编译器(输入源码 => 输出编译后的代码).编译过程分为三个阶段:解析.转换和打印输出. Babel 本身不具有任何转化功能,它把转化的功能都分解到一个个plugin 里面.因此当我们不配置任何插件时,经过 b…
0x00.前言 书接上文.项目经过一系列的配置,开发脚手架已经搭建完毕.接下来开始封装自定义组件.并基于 markdown 文件生成文档和演示案例. 后续文章代码会根据篇幅,不影响理解的情况下进行部分删减,详细代码可在 Github Repo 查看. 0x01.封装第一个组件 封装组件 接下来封装一个loading组件. 创建 packages/loading/src/main.vue 文件(篇幅问题,样式代码详见Github). 创建 packages/loading/index.js 文件.…
最近在用element-ui重构前端项目,无意之中翻阅到一个比较好用的组件间通信方式,借助于vue的封装的发布-订阅消息模式与mixin语法.在开始之前先总结下vue常用的组件间通信方式,具体如下: 1.props与自定义事件 优点:常用的父子.子父组件传递方式,简单易懂 缺点:子父.父子之间传参比较高效,但是爷孙,兄弟组件之间存在通信短板,只能一级级传递 2.vue 2.4中新增的$attrs与$listeners 优点:解决了组件嵌套层次较深问题,通过在组件中绑定组件的属性值与监听组件的事件…
因业务需求需要本地搭建一个emqtt的消息队列服务器,根据官网提示搭建失败,具体如下 官方步骤: Erlang 安装: http://www.erlang.org/ MSYS2 安装: http://www.msys2.org/ MSYS2 安装完成后,根据 MSYS2 中的 pacman 包管理工具安装 Git. Make 工具软件: pacman -S git make 编译环境准备之后,clone 代码开始编译: git clone -b windows https://github.co…
Button组件 button.vue <template> <button class="el-button" @click="handleClick" :disabled="buttonDisabled || loading" :autofocus="autofocus" :type="nativeType" :class="[ type ? 'el-button--' +…