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 相关文章推荐
一个收集图片的bookmarlet(js 刷新页面中的图片)
May 27 Javascript
JavaScript.The.Good.Parts阅读笔记(二)作用域&amp;闭包&amp;减缓全局空间污染
Nov 16 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
Dec 12 Javascript
处理文本部分内容的TextRange对象应用实例
Jul 29 Javascript
JavaScript判断是否为数组的3种方法及效率比较
Apr 01 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
Jul 07 Javascript
分享jQuery封装好的一些常用操作
Jul 28 Javascript
angular分页指令操作
Jan 09 Javascript
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
html中通过JS获取JSON数据并加载的方法
Nov 30 Javascript
如何使用pm2快速将项目部署到远程服务器
Mar 12 Javascript
JavaScript实现拖拽盒子效果
Feb 06 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
Codeigniter出现错误提示Error with CACHE directory的解决方案
2014/06/12 PHP
php发送与接收流文件的方法
2015/02/11 PHP
初识laravel5
2015/03/02 PHP
php获取远程文件内容的函数
2015/11/02 PHP
php+jQuery递归调用POST循环请求示例
2016/10/14 PHP
详解php中 === 的使用
2016/10/24 PHP
php+js实现的无刷新下载文件功能示例
2019/08/23 PHP
如何在PHP中使用AES加密算法加密数据
2020/06/24 PHP
基于jquery的固定表头和列头的代码
2012/05/03 Javascript
jquery实现树形二级菜单实例代码
2013/11/20 Javascript
jQuery对象的链式操作用法分析
2016/05/10 Javascript
解决前端跨域问题方案汇总
2016/11/20 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
2017/03/21 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
2017/04/27 Javascript
addeventlistener监听scroll跟touch(实例讲解)
2017/08/04 Javascript
vue实现个人信息查看和密码修改功能
2018/05/06 Javascript
Vue项目利用axios请求接口下载excel
2020/11/17 Vue.js
Python设计模式之抽象工厂模式
2016/08/25 Python
Python3 执行系统命令并获取实时回显功能
2019/07/09 Python
pytorch 在sequential中使用view来reshape的例子
2019/08/20 Python
Python进度条的制作代码实例
2019/08/31 Python
Python3 使用selenium插件爬取苏宁商家联系电话
2019/12/23 Python
Pyorch之numpy与torch之间相互转换方式
2019/12/31 Python
Python中的None与 NULL(即空字符)的区别详解
2020/09/24 Python
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
2016/03/14 HTML / CSS
HTML5 图片悬停放大的实现代码示例
2019/12/04 HTML / CSS
Html5踩坑记之mandMobile使用小记
2020/04/02 HTML / CSS
师范生自荐信范文
2013/10/06 职场文书
文明教师事迹材料
2014/01/16 职场文书
公益广告宣传方案
2014/02/28 职场文书
2014年两会学习心得体会
2014/03/17 职场文书
《和田的维吾尔》教学反思
2014/04/14 职场文书
出差报告范文
2014/11/06 职场文书
护理实习生带教计划
2015/01/16 职场文书
推广普通话的宣传语
2015/07/13 职场文书
智慧人生:永远不需要向任何人解释你自己
2019/08/20 职场文书