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 相关文章推荐
7个Javascript地图脚本整理
Oct 20 Javascript
jQuery chili图片远处放大插件
Nov 30 Javascript
『jQuery』取指定url格式及分割函数应用
Apr 22 Javascript
JavaScript数据类型检测代码分享
Jan 26 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
Oct 23 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
Jan 13 Javascript
AngularJS监听路由变化的方法
Mar 07 Javascript
微信小程序自定义轮播图
Nov 04 Javascript
如何用原生js写一个弹窗消息提醒插件
May 24 Javascript
node实现爬虫的几种简易方式
Aug 22 Javascript
ES6 async、await的基本使用方法示例
Jun 06 Javascript
JavaScript最完整的深浅拷贝实现方式详解
Feb 28 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若干单维数组遍历方法的比较
2011/09/20 PHP
php中的curl_multi系列函数使用例子
2014/07/29 PHP
php商品对比功能代码分享
2015/09/24 PHP
php冒泡排序与快速排序实例详解
2015/12/07 PHP
基于PHP实现通过照片获取ip地址
2016/04/26 PHP
利用php-cli和任务计划实现刷新token功能的方法
2017/05/03 PHP
PHP在弹框中获取foreach中遍历的id值并传递给地址栏
2017/06/13 PHP
php实现姓名根据首字母排序的类与方法(实例代码)
2018/05/16 PHP
转换json格式的日期为Javascript对象的函数
2010/07/13 Javascript
js 限制数字 js限制输入实现代码
2012/12/04 Javascript
JS之Date对象和获取系统当前时间详解
2014/01/13 Javascript
jquery ui dialog替代confirm实例分析
2016/01/25 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
2016/06/12 Javascript
jQuery事件对象总结
2016/10/17 Javascript
js实现适合新闻类图片的轮播效果
2017/02/05 Javascript
微信小程序数据分析之自定义分析的实现
2018/08/17 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
2019/11/01 jQuery
nodejs环境使用Typeorm连接查询Oracle数据
2019/12/05 NodeJs
Vue中el-form标签中的自定义el-select下拉框标签功能
2020/04/20 Javascript
uniapp,微信小程序中使用 MQTT的问题
2020/07/11 Javascript
vue-cli脚手架的.babelrc文件用法说明
2020/09/11 Javascript
Django中URLconf和include()的协同工作方法
2015/07/20 Python
python使用fcntl模块实现程序加锁功能示例
2017/06/23 Python
解决django FileFIELD的编码问题
2020/03/30 Python
python对execl 处理操作代码
2020/06/22 Python
Visual Studio code 配置Python开发环境
2020/09/11 Python
HTML5 LocalStorage 本地存储详细概括(多图)
2017/08/18 HTML / CSS
Ellesse英国官网:意大利高级运动品牌
2019/07/23 全球购物
德国玩具商店:Planet Happy DE
2021/01/16 全球购物
SQL Server里面什么样的视图才能创建索引
2015/04/17 面试题
体育专业个人求职信范文
2013/12/27 职场文书
学校政风行风评议工作总结
2014/10/21 职场文书
党员争先创优承诺书
2015/01/20 职场文书
离婚民事起诉状
2015/08/03 职场文书
新手初学Java List 接口
2021/07/07 Java/Android
4种方法python批量修改替换列表中元素
2022/04/07 Python