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 IFrame 强制刷新代码
Jul 23 Javascript
用jquery存取照片的具体实现方法
Jun 30 Javascript
显示今天的日期js代码(阳历和农历)
Sep 30 Javascript
jQuery实现复选框批量选择与反选的方法
Jun 17 Javascript
JavaScript实现select添加option
Jul 03 Javascript
详解Vue2.0之去掉组件click事件的native修饰
Apr 20 Javascript
使用JavaScript实现链表的数据结构的代码
Aug 02 Javascript
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
Sep 26 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
Jun 08 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
Oct 30 Javascript
node.js Promise对象的使用方法实例分析
Dec 26 Javascript
elementui实现预览图片组件二次封装
Dec 29 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的开合式多级菜单程序
2006/10/09 PHP
php下实现在指定目录搜索指定类型文件的函数
2008/10/03 PHP
PHP关联数组实现根据元素值删除元素的方法
2015/06/26 PHP
php检测文本的编码
2015/07/26 PHP
PHP+MySQL存储数据常见中文乱码问题小结
2016/06/13 PHP
js 事件小结 表格区别
2007/08/13 Javascript
js正则表达式中test,exec,match方法的区别说明
2014/01/29 Javascript
javascript继承机制实例详解
2014/11/20 Javascript
Angularjs中UI Router全攻略
2016/01/29 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
2016/05/03 Javascript
js获取浏览器和屏幕的各种宽度高度
2017/02/22 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
2017/03/07 Javascript
angular实现IM聊天图片发送实例
2017/05/08 Javascript
浅谈node中的exports与module.exports的关系
2017/08/01 Javascript
基于vue.js快速搭建图书管理平台
2017/10/29 Javascript
微信小程序新手教程之页面打开数量限制
2019/03/03 Javascript
解决layui弹出层layer的area过大被遮挡的问题
2019/09/21 Javascript
Vue关于组件化开发知识点详解
2020/05/13 Javascript
[01:18:33]Secret vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Python线性拟合实现函数与用法示例
2018/12/13 Python
Python递归函数实例讲解
2019/02/27 Python
numpy和pandas中数组的合并、拉直和重塑实例
2019/06/28 Python
pandas对dataFrame中某一个列的数据进行处理的方法
2019/07/08 Python
在python中用print()输出多个格式化参数的方法
2019/07/16 Python
python操作gitlab API过程解析
2019/12/27 Python
Java Spring项目国际化(i18n)详细方法与实例
2020/03/20 Python
美国孕妇装品牌:Destination Maternity
2018/02/04 全球购物
大学生村官工作感言
2014/01/10 职场文书
迟到检讨书300字
2014/02/14 职场文书
新闻专业毕业生求职信
2014/08/08 职场文书
四风问题对照检查材料整改措施
2014/09/27 职场文书
护士长2014年度工作总结
2014/11/11 职场文书
大学生敬老院活动总结
2015/05/07 职场文书
无故旷工检讨书
2015/08/15 职场文书
廉洁自律心得体会2016
2016/01/13 职场文书
postgreSQL数据库基础知识介绍
2022/04/12 PostgreSQL