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 相关文章推荐
jQuery ajax BUG:object doesn't support this property or method
Jul 06 Javascript
jquery动态加载js/css文件方法(自写小函数)
Oct 11 Javascript
解析Node.js异常处理中domain模块的使用方法
Feb 16 Javascript
JavaScript制作简单的日历效果
Mar 10 Javascript
JavaScript学习笔记之数组的增、删、改、查
Mar 23 Javascript
详解js中==与===的区别
Jan 08 Javascript
JavaScript实现各种排序的代码详解
Aug 28 Javascript
Js中将Long转换成日期格式的实现方法
Jun 05 Javascript
layer.open的自适应及居中及子页面标题的修改方法
Sep 05 Javascript
关于Vue中axios的封装实例详解
Oct 20 Javascript
layUI的验证码功能及校验实例
Oct 25 Javascript
javascript数组的定义及操作实例
Nov 10 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
PHP MySQL应用中使用XOR运算加密算法分享
2011/08/28 PHP
如何在smarty中增加类似foreach的功能自动加载数据
2013/06/26 PHP
php绘制一条弧线的方法
2015/01/24 PHP
PHP实现的登录,注册及密码修改功能分析
2016/11/25 PHP
PHP微信模板消息操作示例
2017/06/29 PHP
PHP读取目录树的实现方法分析
2019/03/22 PHP
完美解决JS中汉字显示乱码问题(已解决)
2006/12/27 Javascript
在html页面中包含共享页面的方法
2008/10/24 Javascript
IE和FireFox(FF)中js和css的不同
2009/04/13 Javascript
JavaScript arguments 多参传值函数
2010/10/24 Javascript
js下判断 iframe 是否加载完成的完美方法
2010/10/26 Javascript
B/S模式项目中常用的javascript汇总
2013/12/17 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
2014/08/19 Javascript
js实现缓冲运动效果的方法
2015/04/10 Javascript
JS返回只包含数字类型的数组实例分析
2016/12/16 Javascript
js实现日期显示的一些操作(实例讲解)
2017/07/27 Javascript
JS实现div模块的截图并下载功能
2017/10/17 Javascript
详解express + mock让前后台并行开发
2018/06/06 Javascript
在vue中使用setInterval的方法示例
2019/04/16 Javascript
HTML元素拖拽功能实现的完整实例
2020/12/04 Javascript
Python中splitlines()方法的使用简介
2015/05/20 Python
python操作列表的函数使用代码详解
2017/12/28 Python
Pandas 按索引合并数据集的方法
2018/11/15 Python
python日志logging模块使用方法分析
2019/05/23 Python
通过 Python 和 OpenCV 实现目标数量监控
2020/01/05 Python
解决python gdal投影坐标系转换的问题
2020/01/17 Python
面向对象设计的原则是什么
2013/02/13 面试题
承办会议欢迎词
2014/01/17 职场文书
新学期班主任寄语
2014/01/18 职场文书
教师节促销活动方案
2014/02/14 职场文书
单位绩效考核方案
2014/05/11 职场文书
教育系统干部作风整顿心得体会
2014/09/09 职场文书
基于Python实现的购物商城管理系统
2021/04/27 Python
Go语言空白表示符_的实例用法
2021/07/04 Golang
vue中控制mock在开发环境使用,在生产环境禁用方式
2022/04/06 Vue.js
使用Redis实现分布式锁的方法
2022/06/16 Redis