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 相关文章推荐
删除重复数据的算法
Nov 23 Javascript
让iframe子窗体取父窗体地址栏参数(querystring)
Oct 13 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
Sep 06 Javascript
JavaScript 浏览器对象模型BOM使用介绍
Apr 13 Javascript
AngularJs Understanding the Controller Component
Sep 02 Javascript
js数组操作方法总结(必看篇)
Nov 22 Javascript
js禁止浏览器的回退事件
Apr 20 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
Apr 21 Javascript
详解html-webpack-plugin用法全解
Jan 22 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
Sep 12 Javascript
JavaScript多种页面刷新方法小结
Apr 04 Javascript
详解json串反转义(消除反斜杠)
Aug 12 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
一个颜色轮换的简单例子
2006/10/09 PHP
PHP读取数据库并按照中文名称进行排序实现代码
2013/01/29 PHP
PHP在线生成二维码(google api)的实现代码详解
2013/06/04 PHP
PHPMailer发送HTML内容、带附件的邮件实例
2014/07/01 PHP
php生成Android客户端扫描可登录的二维码
2016/05/13 PHP
php实现文件预览功能
2017/05/23 PHP
php 提交表单 关闭layer弹窗iframe的实例讲解
2018/08/20 PHP
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
2010/11/23 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
2015/03/01 Javascript
jquery实现加载进度条提示效果
2015/11/23 Javascript
jQuery学习之DOM节点的插入方法总结
2017/01/22 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
2017/03/02 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
2017/07/06 Javascript
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
2017/09/26 Javascript
nodejs 图片预览和上传的示例代码
2017/09/30 NodeJs
vue2.0 子组件改变props值,并向父组件传值的方法
2018/03/01 Javascript
详解vue服务端渲染浏览器端缓存(keep-alive)
2018/10/12 Javascript
typescript nodejs 依赖注入实现方法代码详解
2019/07/21 NodeJs
如何在wxml中直接写js代码(wxs)
2019/11/14 Javascript
javascript实现雪花飘落效果
2020/08/19 Javascript
vue中实现点击变成全屏的多种方法
2020/09/27 Javascript
[01:21:36]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python实现完整的事务操作示例
2017/06/20 Python
rabbitmq(中间消息代理)在python中的使用详解
2017/12/14 Python
python实现在图片上画特定大小角度矩形框
2018/10/24 Python
Python学习笔记之图片人脸检测识别实例教程
2019/03/06 Python
python 爬取学信网登录页面的例子
2019/08/13 Python
解决keras模型保存h5文件提示无此目录问题
2020/07/01 Python
CSS3的新特性介绍
2008/10/31 HTML / CSS
HTML5实现Notification API桌面通知功能
2016/03/02 HTML / CSS
Backcountry旗下的户外商品闪购网站:steep&cheap
2016/09/22 全球购物
下列程序在32位linux或unix中的结果是什么
2015/01/26 面试题
学校大课间活动方案
2014/01/30 职场文书
惹女朋友生气检讨书
2015/05/06 职场文书
python文件与路径操作神器 pathlib
2022/04/01 Python
实战Python爬虫爬取酷我音乐
2022/04/11 Python