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 相关文章推荐
js完美实现@提到好友特效(兼容各大浏览器)
Mar 16 Javascript
JavaScript中消除闭包的一般方法介绍
Mar 16 Javascript
jquery中ready()函数执行的时机和window的load事件比较
Jun 22 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
Aug 27 Javascript
详解JavaScript编程中正则表达式的使用
Oct 25 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
Dec 01 Javascript
Node.js实用代码段之获取Buffer对象字节长度
Mar 17 Javascript
JavaScript中原型链存在的问题解析
Sep 25 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
Oct 26 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
Oct 29 Javascript
全面解析Node.js 8 重要功能和修复
Jun 02 Javascript
JavaScript实现图片拖曳效果
Sep 08 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动态页生成静态页的3种常用方法
2014/11/13 PHP
Windows下编译PHP5.4和xdebug全记录
2015/04/03 PHP
Javascript下判断是否为闰年的Datetime包
2010/10/26 Javascript
使用jQuery的将桌面应用程序引入浏览器
2010/11/19 Javascript
jquery中加载图片自适应大小主要实现代码
2013/08/23 Javascript
node.js中的http.createClient方法使用说明
2014/12/15 Javascript
jQuery中before()方法用法实例
2014/12/25 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
2016/01/08 Javascript
jQuery动画效果图片轮播特效
2016/01/12 Javascript
微信小程序实现图片预加载组件
2017/01/18 Javascript
设置cookie指定时间失效(实例代码)
2017/05/28 Javascript
nodejs前端自动化构建环境的搭建
2017/07/26 NodeJs
vue2.0父子组件间传递数据的方法
2018/08/16 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
2019/04/10 Javascript
Vue.js实现tab切换效果
2019/07/24 Javascript
JS 创建对象的模式实例小结
2020/04/28 Javascript
[09:31]2016国际邀请赛中国区预选赛Yao赛后采访 答题送礼
2016/06/27 DOTA
python实现查询苹果手机维修进度
2015/03/16 Python
Python通过命令开启http.server服务器的方法
2017/11/04 Python
Opencv+Python实现图像运动模糊和高斯模糊的示例
2019/04/11 Python
为什么你还不懂得怎么使用Python协程
2019/05/13 Python
Python基础之字符串常见操作经典实例详解
2020/02/26 Python
Python中BeautifulSoup通过查找Id获取元素信息
2020/12/07 Python
严选全球尖货,立足香港:Bonpont宝盆
2018/07/24 全球购物
迪卡侬(Decathlon)加拿大官网:源自法国的运动专业超市
2020/11/22 全球购物
留学生如何写好自荐信
2013/12/27 职场文书
会计专业大学生职业生涯规划书
2014/02/11 职场文书
2015年元旦文艺汇演主持词
2014/03/26 职场文书
全国文明单位申报材料
2014/05/31 职场文书
ktv好的活动方案
2014/08/17 职场文书
关于成绩下滑的自我检讨书
2014/09/20 职场文书
见习报告格式范文
2014/11/08 职场文书
幼儿园教师师德师风承诺书
2015/04/28 职场文书
golang 实现菜单树的生成方式
2021/04/28 Golang
Vue详细的入门笔记
2021/05/10 Vue.js
yyds什么意思?90后已经听不懂00后讲话了……
2022/02/03 杂记