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模拟面向对象全解(一、类型及传递)
Jul 13 Javascript
js 操作select和option常用代码整理
Dec 13 Javascript
jQuery实现用方向键控制层的上下左右移动
Jan 13 Javascript
node.js中的path.delimiter方法使用说明
Dec 09 Javascript
jQuery实现根据类型自动显示和隐藏表单
Mar 18 Javascript
javascript异步处理工作机制详解
Apr 13 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
Oct 26 Javascript
微信小程序 详解页面跳转与返回并回传数据
Feb 13 Javascript
AngularJS实现注册表单验证功能
Oct 16 Javascript
微信小程序 行的删除和增加操作实现详解
Sep 29 Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
Apr 08 Javascript
JS数组方法some、every和find的使用详情
Oct 05 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脚本监控Nginx 502错误并自动重启php-fpm
2015/05/13 PHP
Javascript代码混淆综合解决方案-Javascript在线混淆器
2006/12/18 Javascript
Javascript Function对象扩展之延时执行函数
2010/07/06 Javascript
基于jquery的一个浮动框(扩展性比较好 )
2010/08/27 Javascript
JS解决url传值出现中文乱码的另类办法
2013/04/08 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
2013/07/05 Javascript
javascript 树形导航菜单实例代码
2013/08/13 Javascript
javascript删除字符串最后一个字符
2014/01/14 Javascript
Jquery搜索父元素操作方法
2015/02/10 Javascript
Jquery ajax请求导出Excel表格的实现代码
2016/06/08 Javascript
jquery获取easyui日期控件的值实现方法
2016/11/09 Javascript
Mint UI 基于 Vue.js 移动端组件库
2017/11/07 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
2018/01/17 Javascript
解决vue.js this.$router.push无效的问题
2018/09/03 Javascript
angularJs利用$scope处理升降序的方法
2018/10/08 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
2019/05/14 Javascript
vue集成kindeditor富文本的实现示例代码
2019/06/07 Javascript
[59:35]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第一场 1月8日
2021/03/11 DOTA
利用Python批量生成任意尺寸的图片
2016/08/29 Python
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
Python实现查找字符串数组最长公共前缀示例
2019/03/27 Python
利用Python模拟登录pastebin.com的实现方法
2019/07/12 Python
记录模型训练时loss值的变化情况
2020/06/16 Python
python归并排序算法过程实例讲解
2020/11/04 Python
css3的动画特效之动画序列(animation)
2017/12/22 HTML / CSS
html5将图片转换成base64的实例代码
2016/09/21 HTML / CSS
肯尼亚网上商城:Kilimall
2016/08/20 全球购物
英国最大的邮寄种子和植物公司:Thompson & Morgan
2017/09/21 全球购物
院领导写的就业推荐信
2014/03/09 职场文书
给孩子的新年寄语
2014/04/08 职场文书
助理政工师申报材料
2014/06/03 职场文书
乡镇平安建设汇报材料
2014/08/25 职场文书
红领巾广播站广播稿(3篇)
2014/09/20 职场文书
2015年学校教科室工作总结
2015/07/20 职场文书
优秀范文:《但愿人长久》教学反思3篇
2019/10/24 职场文书
解决golang结构体tag编译错误的问题
2021/05/02 Golang