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 相关文章推荐
javascript中获取选中对象的类型
Apr 02 Javascript
extjs DataReader、JsonReader、XmlReader的构造方法
Nov 07 Javascript
jquery 事件对象属性小结
Apr 27 Javascript
浅析jquery unbind()方法移除元素绑定的事件
May 24 Javascript
jQuery文件上传控件 Uploadify 详解
Jun 20 Javascript
JS for...in 遍历语句用法实例分析
Aug 24 Javascript
详解Angular4中路由Router类的跳转navigate
Jun 09 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
Sep 20 Javascript
详解webpack require.ensure与require AMD的区别
Dec 13 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
Sep 30 Javascript
JS异步执行结果获取的3种解决方式
Feb 19 Javascript
js对象属性名驼峰式转下划线的实例代码
Sep 17 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
Zerg基本策略
2020/03/14 星际争霸
echo(),print(),print_r()之间的区别?
2006/11/19 PHP
php中通过curl smtp发送邮件
2012/06/05 PHP
工厂模式在Zend Framework中应用介绍
2012/07/10 PHP
微信公众平台开发实现2048游戏的方法
2015/04/15 PHP
php中二维数组排序问题方法详解
2015/08/28 PHP
iis6手工创建网站后无法运行php脚本的解决方法
2017/06/08 PHP
php统计数组不同元素的个数的实例方法
2019/09/26 PHP
JQuery Easyui Tree的oncheck事件实现代码
2010/05/28 Javascript
JS图片预加载 JS实现图片预加载应用
2012/12/03 Javascript
使用jQuery实现验证上传图片的格式与大小
2014/12/03 Javascript
jQuery中:password选择器用法实例
2015/01/03 Javascript
jQuery中addClass()方法用法实例
2015/01/05 Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
2015/05/25 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
2016/03/01 Javascript
浅谈jQuery为哪般去掉了浏览器检测
2016/08/29 Javascript
浅谈js中同名函数和同名变量的执行问题
2017/02/12 Javascript
通过示例彻底搞懂js闭包
2017/08/10 Javascript
浅谈js中的this问题
2017/08/31 Javascript
JS中this的指向以及call、apply的作用
2018/05/06 Javascript
基于vue cli 通过命令行传参实现多环境配置
2018/07/12 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
2019/06/03 Javascript
JavaScript实现PC端横向轮播图
2020/02/07 Javascript
Python正则获取、过滤或者替换HTML标签的方法
2016/01/28 Python
用python记录运行pid,并在需要时kill掉它们的实例
2017/01/16 Python
Python中装饰器高级用法详解
2017/12/25 Python
对Python 获取类的成员变量及临时变量的方法详解
2019/01/22 Python
Python3.5运算符操作实例详解
2019/04/25 Python
互斥锁解决 Python 中多线程共享全局变量的问题(推荐)
2020/09/28 Python
HTML5 canvas基本绘图之绘制线条
2016/06/27 HTML / CSS
俄罗斯和世界各地的酒店预订:Hotels.com俄罗斯
2016/08/19 全球购物
Troy-Bilt官网:草坪割草机、吹雪机、分蘖机等
2019/02/19 全球购物
和平主题的演讲稿
2014/01/12 职场文书
货物运输服务质量承诺书
2014/05/29 职场文书
我们的节日中秋活动方案
2014/08/19 职场文书
拥有这5个特征人,“命”都不会太差
2019/08/16 职场文书