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 相关文章推荐
jQuery EasyUI API 中文文档 - Draggable 可拖拽
Sep 29 Javascript
jquery设置控件位置的方法
Aug 21 Javascript
javascript内存管理详细解析
Nov 11 Javascript
js中直接声明一个对象的方法
Aug 10 Javascript
js Object2String方便查看js对象内容
Nov 24 Javascript
js鼠标滑过图片震动特效的方法
Feb 17 Javascript
原生JS实现LOADING效果
Mar 16 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
Aug 25 Javascript
深入理解vue.js双向绑定的实现原理
Dec 05 Javascript
jquery实现左右轮播切换效果
Jan 01 jQuery
React Native基础入门之初步使用Flexbox布局
Jul 02 Javascript
JS数组求和的常用方法总结【5种方法】
Jan 14 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正则提取html图片(img)src地址与任意属性的方法
2017/02/08 PHP
Yii框架中使用PHPExcel的方法分析
2019/07/25 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
PHP isset empty函数相关面试题及解析
2020/12/11 PHP
iis6+javascript Add an Extension File
2007/06/13 Javascript
Prototype ObjectRange对象学习
2009/07/19 Javascript
js跳转页面方法实现汇总
2014/02/11 Javascript
nodejs修复ipa处理过的png图片
2016/02/17 NodeJs
js提交form表单,并传递参数的实现方法
2016/05/25 Javascript
jquery层级选择器的实现(匹配后代元素div)
2016/09/05 Javascript
Javascript 函数的四种调用模式
2016/11/05 Javascript
JQueryEasyUI之DataGrid数据显示
2016/11/23 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
2016/12/28 Javascript
jQuery实现限制文本框的输入长度
2017/01/11 Javascript
基于react后端渲染模板引擎noox发布使用
2018/01/11 Javascript
js实现一个简单的MVVM框架示例
2018/01/15 Javascript
Vue程序调试的方法
2019/06/17 Javascript
javascript实现图片轮播代码
2019/07/09 Javascript
python 实现自动远程登陆scp文件实例代码
2017/03/13 Python
python3实现ftp服务功能(服务端 For Linux)
2017/03/24 Python
Python + selenium自动化环境搭建的完整步骤
2018/05/19 Python
python实时监控cpu小工具
2018/06/21 Python
Python第三方库h5py_读取mat文件并显示值的方法
2019/02/08 Python
英国最大的汽车交易网站:Auto Trader UK
2016/09/23 全球购物
final, finally, finalize的区别
2012/03/01 面试题
竞争上岗演讲稿范文
2014/05/12 职场文书
亮剑精神演讲稿
2014/05/23 职场文书
汽车服务工程专业自荐信
2014/09/02 职场文书
知识就是力量演讲稿
2014/09/13 职场文书
乡镇党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
常务副县长“三严三实”对照检查材料思想汇报
2014/10/05 职场文书
习总书记三严三实学习心得体会
2014/10/13 职场文书
2015年小学校长工作总结
2015/05/19 职场文书
Django项目配置Memcached和Redis, 缓存选择哪个更有优势
2021/04/06 Python
Beekeeper Studio开源数据库管理工具比Navicat更炫酷
2022/06/21 数据库
Windows Server 2012 R2服务器安装与配置的完整步骤
2022/07/15 Servers