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 相关文章推荐
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
Feb 18 Javascript
jquery获取table中的某行全部td的内容方法
Mar 08 Javascript
javaScript如何生成xmlhttp
Dec 16 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
Feb 19 Javascript
13个PHP函数超实用
Oct 21 Javascript
javascript实现获取浏览器版本、浏览器类型
Dec 02 Javascript
JS常用加密编码与算法实例总结
Dec 22 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
Feb 03 Javascript
weebox弹出窗口不居中显示的解决方法
Nov 27 Javascript
关于TypeScript模块导入的那些事
Jun 12 Javascript
vue Tab切换以及缓存页面处理的几种方式
Nov 05 Javascript
node.js 微信开发之定时获取access_token
Feb 07 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实现的简易扫雷游戏实例
2015/07/09 PHP
php简单判断文本编码的方法
2015/07/30 PHP
cakephp常见知识点汇总
2017/02/24 PHP
javascript 导出数据到Excel(处理table中的元素)
2009/12/18 Javascript
jQuery对html元素的取值与赋值实例详解
2015/12/18 Javascript
jquery实现图片预加载
2015/12/25 Javascript
Ionic快速安装教程
2016/06/03 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
2017/02/16 Javascript
在node中如何使用 ES6
2017/04/22 Javascript
理解Angular的providers给Http添加默认headers
2017/07/04 Javascript
JavaScript插入排序算法原理与实现方法示例
2018/08/06 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
2018/11/06 Javascript
15分钟深入了解JS继承分类、原理与用法
2019/01/19 Javascript
vue实现跨域的方法分析
2019/05/21 Javascript
vue多页面项目中路由使用history模式的方法
2019/09/23 Javascript
vue控制多行文字展开收起的实现示例
2019/10/11 Javascript
jQuery实现的图片点击放大缩小功能案例
2020/01/02 jQuery
vue实现登录功能
2020/12/31 Vue.js
python自动化测试之setUp与tearDown实例
2014/09/28 Python
python使用自定义user-agent抓取网页的方法
2015/04/15 Python
启动targetcli时遇到错误解决办法
2017/10/26 Python
python3利用smtplib通过qq邮箱发送邮件方法示例
2017/12/03 Python
python实现机器人行走效果
2018/01/29 Python
Python爬虫之网页图片抓取的方法
2018/07/16 Python
解决Python内层for循环如何break出外层的循环的问题
2019/06/24 Python
python [:3] 实现提取数组中的数
2019/11/27 Python
Python基于WordCloud制作词云图
2019/11/29 Python
python 画函数曲线示例
2019/12/04 Python
解决pycharm 安装numpy失败的问题
2019/12/05 Python
Pyspark获取并处理RDD数据代码实例
2020/03/27 Python
Python实现疫情通定时自动填写功能(附代码)
2020/05/27 Python
Python爬虫谷歌Chrome F12抓包过程原理解析
2020/06/04 Python
HTML5 Web Workers之网站也能多线程的实现
2013/04/24 HTML / CSS
代领学位证书毕业证书委托书
2014/09/30 职场文书
高中班主任寄语
2019/06/21 职场文书
css3实现的加载动画效果
2021/04/07 HTML / CSS