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 全角转半角部分
Oct 28 Javascript
JS文本框追加多个下拉框的值的简单实例
Jul 12 Javascript
javascript放大镜效果的简单实现
Dec 09 Javascript
javascript的数组和常用函数详解
May 09 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
Dec 31 Javascript
整理Javascript基础语法学习笔记
Nov 29 Javascript
微信小程序 实战小程序实例
Oct 08 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
Oct 10 Javascript
javascript 玩转Date对象(实例讲解)
Jul 11 Javascript
VueJS 组件参数名命名与组件属性转化问题
Dec 03 Javascript
Vue 组件参数校验与非props特性的方法
Feb 12 Javascript
layui实现checkbox的目录树tree的例子
Sep 12 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面向对象全攻略 (十四) php5接口技术
2009/09/30 PHP
PHP提示Warning:phpinfo() has been disabled函数禁用的解决方法
2014/12/17 PHP
JavaScript 继承详解(四)
2009/07/13 Javascript
js实现两点之间画线的方法
2015/05/12 Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
2015/05/19 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
javascript计时器编写过程与实现方法
2016/02/29 Javascript
angularjs 源码解析之scope
2016/08/22 Javascript
JS button按钮实现submit按钮提交效果
2016/11/01 Javascript
jQuery 的 ready()的纯js替代方法
2016/11/20 Javascript
实例解析Array和String方法
2016/12/14 Javascript
常用的javascript设计模式
2017/01/11 Javascript
js 提取某()特殊字符串长度的实例
2017/12/06 Javascript
react native 获取地理位置的方法示例
2018/08/28 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
2018/12/09 Javascript
highCharts提示框中显示当前时间的方法
2019/01/18 Javascript
Python cookbook(数据结构与算法)实现查找两个字典相同点的方法
2018/02/18 Python
Django实现学员管理系统
2019/02/26 Python
Django通用类视图实现忘记密码重置密码功能示例
2019/12/17 Python
Python matplotlib画曲线例题解析
2020/02/07 Python
解决windows下python3使用multiprocessing.Pool出现的问题
2020/04/08 Python
python 双循环遍历list 变量判断代码
2020/05/04 Python
解决Keyerror ''acc'' KeyError: ''val_acc''问题
2020/06/18 Python
Python图像读写方法对比
2020/11/16 Python
python 利用panda 实现列联表(交叉表)
2021/02/06 Python
Pytorch - TORCH.NN.INIT 参数初始化的操作
2021/02/27 Python
三只松鼠官方旗舰店:全网坚果销售第1
2017/11/25 全球购物
美国体育用品在线:Modell’s Sporting Goods
2018/06/07 全球购物
For Art’s Sake官网:手工制作的奢华眼镜
2018/12/15 全球购物
写出二分查找算法的两种实现
2013/05/13 面试题
毕业求职自荐信格式是什么
2013/11/19 职场文书
运动会通讯稿500字
2014/02/20 职场文书
共产党员批评与自我批评
2014/10/15 职场文书
房屋租赁协议书
2014/10/18 职场文书
CSS实现单选折叠菜单功能
2021/11/01 HTML / CSS
muduo TcpServer模块源码分析
2022/04/26 Redis