element-ui 的el-button组件中添加自定义颜色和图标的实现方法


Posted in Javascript onOctober 26, 2018

我使用的element-ui的版本是V1.4.13。

element-ui 的el-button组件中添加自定义颜色和图标的实现方法

如上图所示,如果使用el-button,加颜色是可以通过设置type属性的值,加图标就设置icon属性的值。

现在产品给了一个需求,就是自定义的很多种类别,不同的类别的按钮显示不同的颜色和图标。如下图所示:

element-ui 的el-button组件中添加自定义颜色和图标的实现方法

为了方便开发,目前的解决方案是:添加一个自定义全局指令,同时在element-ui源码中,加入对应的组件。开发人员在开发时只要在type中添加不同的类的值,就能添加上颜色和图标。

1、在element-ui的button源码中加了自定义指令otherRender,以及一个局部组件vRender

element-ui 的el-button组件中添加自定义颜色和图标的实现方法

2、局部组件vRender的写法:

element-ui 的el-button组件中添加自定义颜色和图标的实现方法

这里不懂的可以看下 https://cn.vuejs.org/v2/guide/render-function.html中的函数式组件

element-ui 的el-button组件中添加自定义颜色和图标的实现方法

3、自定义指令otherRender,写在项目公共的js中。这里我先将所有的类对应的颜色类和图标定义好。css样式是根据需求自定义的

element-ui 的el-button组件中添加自定义颜色和图标的实现方法

然后再在指令中循环添加

element-ui 的el-button组件中添加自定义颜色和图标的实现方法

在使用el-button时只要添加对应的type值就能使用,对应的颜色和图标就会显示了

下面看下自定义elementui中的图标

前提

elementui图标库图标较少

当你想用elementui的控件而不想用它的图标时,就可以使用自定义的方式来实现

实现

el-icon-my-export为我自定义的图标命名

<el-button class="default" icon="el-icon-my-export">导出</el-button>
//使用图片来替换
//before属性中的content文本是用来占位的,必须有
//可以设置字体大小来确定大小
//使用visibility: hidden;来隐藏文字
.el-icon-my-export{
  background: url(/officeHouse/resources/images/export.png) center no-repeat;
  background-size: cover;
}
.el-icon-my-export:before{
  content: "替";
  font-size: 16px;
  visibility: hidden;
}

//如果直接使用字体图片
//直接在before属性设置对应的content就行
.el-icon-my-export{
  font-size: 16px;
}
.el-icon-my-export:before{
  content: "\e611";
}

content里面使用汉字大小会比较正常,但是汉字有时候会出现乱码,可以使用Unicode编码

//编码后的的替为 \u66ff
//书写到css里面的时候需要去掉u
.el-icon-my-export:before{
  content: "\66ff";
  font-size: 16px;
  visibility: hidden;
}

其他控件的图标替换大多如此,当然具体问题具体分析,我也不确定会不会有不同的情况

总结

以上所述是小编给大家介绍的element-ui 的el-button组件中添加自定义颜色和图标的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
Apr 29 Javascript
兼容FireFox 的 js 日历 支持时间的获取
Mar 04 Javascript
jQuery 文本框得失焦点的简单实例
Feb 19 Javascript
使用plupload自定义参数实现多文件上传
Jul 19 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
Jan 24 Javascript
jQuery监听浏览器窗口大小的变化实例
Feb 07 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
Angular实现的进度条功能示例
Feb 18 Javascript
JsChart组件使用详解
Mar 04 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
Oct 08 Javascript
vue路由守卫+登录态管理实例分析
May 21 Javascript
node.js express框架简介与实现
Jul 23 Javascript
angularjs通过过滤器返回超链接的方法
Oct 26 #Javascript
js使用formData实现批量上传
Mar 27 #Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
Oct 26 #Javascript
js自定义input文件上传样式
Oct 26 #Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
Oct 25 #Javascript
在Vue中使用axios请求拦截的实现方法
Oct 25 #Javascript
webpack4+react多页面架构的实现
Oct 25 #Javascript
You might like
ioncube_loader_win_5.2.dll的错误解决方法
2015/01/04 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
2007/02/05 Javascript
让任务管理器中的CPU跳舞的js代码
2008/11/01 Javascript
简单谈谈javascript代码复用模式
2015/01/28 Javascript
利用python分析access日志的方法
2016/10/26 Javascript
原生js实现对Ajax的封装(仿jquery)
2017/01/22 Javascript
详解js的异步编程技术的方法
2017/02/09 Javascript
轻松实现jQuery添加删除按钮Click事件
2017/03/13 Javascript
vue全局组件与局部组件使用方法详解
2018/03/29 Javascript
对angular 监控数据模型变化的事件方法$watch详解
2018/10/09 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
2019/03/06 Javascript
JS实现继承的几种常用方式示例
2019/06/22 Javascript
javascript递归函数定义和用法示例分析
2020/07/22 Javascript
jQuery实现计算器功能
2020/10/19 jQuery
python读取Android permission文件
2013/11/01 Python
使用Node.js和Socket.IO扩展Django的实时处理功能
2015/04/20 Python
Python的Tornado框架异步编程入门实例
2015/04/24 Python
用Python将mysql数据导出成json的方法
2018/08/21 Python
python判断数字是否是超级素数幂
2018/09/27 Python
Python实现K折交叉验证法的方法步骤
2019/07/11 Python
Flask框架路由和视图用法实例分析
2019/11/07 Python
python3 sorted 如何实现自定义排序标准
2020/03/12 Python
如何将json数据转换为python数据
2020/09/04 Python
CSS3动画:5种预载动画效果实例
2017/04/05 HTML / CSS
英国手机零售商:Carphone Warehouse
2018/06/06 全球购物
英智兴达软件测试笔试题
2016/10/12 面试题
面向对象设计的原则是什么
2013/02/13 面试题
深圳茁壮笔试题
2015/05/28 面试题
模范家庭事迹材料
2014/02/10 职场文书
好书伴我成长演讲稿
2014/05/14 职场文书
本科生就业推荐信
2014/05/19 职场文书
2014党员民主评议个人总结
2014/09/10 职场文书
清洁工岗位职责
2015/02/13 职场文书
职工的安全责任书范文!
2019/07/02 职场文书
Tomcat执行startup.bat出现闪退的原因及解决办法
2022/04/20 Servers