element-ui 的el-button组件中添加自定义颜色和图标的实现方法

我使用的element-ui的版本是V1.4.13。

如上图所示，如果使用el-button,加颜色是可以通过设置type属性的值，加图标就设置icon属性的值。

现在产品给了一个需求，就是自定义的很多种类别，不同的类别的按钮显示不同的颜色和图标。如下图所示：

为了方便开发，目前的解决方案是：添加一个自定义全局指令，同时在element-ui源码中，加入对应的组件。开发人员在开发时只要在type中添加不同的类的值，就能添加上颜色和图标。

1、在element-ui的button源码中加了自定义指令otherRender，以及一个局部组件vRender

2、局部组件vRender的写法：

这里不懂的可以看下 https://cn.vuejs.org/v2/guide/render-function.html中的函数式组件

3、自定义指令otherRender，写在项目公共的js中。这里我先将所有的类对应的颜色类和图标定义好。css样式是根据需求自定义的

然后再在指令中循环添加

在使用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组件中添加自定义颜色和图标的实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • vue 自定义组件实现通讯录功能

    在线demo:http://tangyupeng.top/dist/index.html#/phone <template> <div> <my-header custom-title="通讯录" custom-fixed > <button @touchstart="backBtn" slot="left">首页</button> <button @touchstart=&quo

  • 微信小程序wx.request实现后台数据交互功能分析

    本文实例讲述了微信小程序wx.request实现后台数据交互功能.分享给大家供大家参考,具体如下: 记录微信小程序wx.request这个api在跟后台交互时遇上的问题. 1.根据资料,完成第一步,请求发送,代码如下: wx.request({ url: 'https://localhost:8443/xiaochengxu/addBill.do', data: e.detail.value, method: 'POST', success:function(res) { console.log

  • 详解微信小程序自定义组件的实现及数据交互

    简单的自定义组件 本文的使用场景是:多个页面都需要用到拨打电话功能,为减少代码量.便于维护,所以自定义了一个组件,每个页面直接调用即可.基本实现下图样式: 下面我们来一步步的实现它: step1:创建文件夹以及文件 首先创建一个components(名字可自取)文件夹,用于放置所有自定义的组件, 里面可以用右键自动创建的方式,新建一个Component组件,例如: 创建之后的目录结构为: 其中callphone是我们本次要实现的拨打电话组件. step2:组件的基本搭建 在callphone.w

  • 微信小程序 数据交互与渲染实例详解

    微信小程序 数据交互与渲染实例详解

    微信小程序 数据交互与渲染 实现效果图: 微信小程序的api中提供了网络交互的api,我们只要调用即可和后端进行数据交互,该api为wx.request.,具体代码如下. //list.js //获取应用实例 var app = getApp() Page({ data: { list:[], hiddenLoading: true, url: '' }, loadList: function () { var that = this; that.setData({ hiddenLoading:

  • 微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题

    首先我们在pages文件夹下创建components目录用于存放自定义组件.如图所示,以我创建的dialog组件为例,自定义组件的格式与页面一样,分为4个文件. 图1 图2 如上图2所示,假如index页面有一个按钮触发点击事件后弹出dialog,并且当点击某个部门时,将dialog关闭,并将部门名称与红色标题同步. 一.首先把dialog组件的样式写好,并在index页面相应的位置引用.以下就是代码啦(分别为:wxml.wxss.js.json) <view class='wx_dialog_

  • 微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解

    微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解

    本文实例讲述了微信小程序学习笔记之表单提交与PHP后台数据交互处理.分享给大家供大家参考,具体如下: 前面一篇结介绍了微信小程序函数定义.页面渲染.这里介绍form表单提交与后台php数据交互处理. [form表单提交] form.wxml: <form bindsubmit="formSubmit" bindreset="formReset"> <view> 昵称:<input type="text" name=&

  • 微信小程序自定义tabBar组件开发详解

    微信小程序自定义tabBar组件开发详解

    本文实例为大家分享了微信小程序自定义tabBar组件的具体代码,供大家参考,具体内容如下 以下代码保存在github地址 先看一看目录 template文件夹里存放tabbar模板. template/template.wxml <template name="tabBar"> <view class="tabBar"> <block wx:for="{{tabBar}}" wx:for-item="ite

  • vue-自定义组件传值的实例讲解

    项目中,我们经常会遇到自定义组件传值的问题,方法很多种,但是原理很简单,下述文档总结实际项目中使用的传值方式. 父组件传递给子组件某一值,子组件内会修改该值,然后父组件需要获取新值 在 Vue 中,父子组件的关系可以总结为 prop 向下传递,事件向上传递.父组件通过 prop给子组件下发数据,子组件通过事件给父组件发送消息. 自定义组件传值 常规prop-event 父组件 <prop-event-value :address="address" @update="v

  • element-ui 的el-button组件中添加自定义颜色和图标的实现方法

    我使用的element-ui的版本是V1.4.13. 如上图所示,如果使用el-button,加颜色是可以通过设置type属性的值,加图标就设置icon属性的值. 现在产品给了一个需求,就是自定义的很多种类别,不同的类别的按钮显示不同的颜色和图标.如下图所示: 为了方便开发,目前的解决方案是:添加一个自定义全局指令,同时在element-ui源码中,加入对应的组件.开发人员在开发时只要在type中添加不同的类的值,就能添加上颜色和图标. 1.在element-ui的button源码中加了自定义指

  • vue 组件中添加样式不生效的解决方法

    如何产生 在开发项目中遇到在组件中添加样式不生效的情况.具体场景如下 //// vue 组件 <template> <div class="box" data-v-33f8ed40></div> <template> //我用js在上面div标签中插入一个<p class='text'>text goes here</p> <script> export default { ... mounted(){

  • Vue Element UI自定义描述列表组件

    Vue Element UI自定义描述列表组件

    本文实例为大家分享了Vue Element UI自定义描述列表组件的具体代码,供大家参考,具体内容如下 效果图 写在前面 写后台管理经常从列表点击查看详情,展示数据信息,Element UI虽然有表格组件,但是描述组件并没有,之前团队的成员遇到这种情况都自己去写样式,写起来也麻烦,而且每个人写出来的样式也不统一,破坏了项目的整体风格. 像是Ant Design UI就有描述组件,用起来特别舒服,所以索性自己结合Element UI的el-row和el-col自己写了一个. 实现哪些功能 1.每行

  • 解决WebStorm 2022.3.x 无法识别 Element UI 2.15.11 新版本中的 el-xxx 标签问题(两种解决方案)

    目录 问题解读 解决(方案一) 解决(方案二) 问题解读 如题,其实2.15.11这个版本的Element UI新增了功能,改进WebStorm IDE和其他JetBrains IDE中的代码帮助.本义是想很好的支持IDE软件,代码提示更加方便,但作者发布时候少打包了一个文件,这就导致Webstorm不认识所有的el-xxx标签!!! 解决(方案一) 既然知道了这个版本有点小问题,那就简单粗暴,暂时降级到2.15.10版本,提示就有了.等过段时间官方修复了BUG,再改回最新版即可. 注意,由于我

  • 在原生不支持的旧环境中添加兼容的Object.keys实现方法

    如下所示: if (!Object.keys) { Object.keys = (function () { var hasOwnProperty = Object.prototype.hasOwnProperty, //原型上的方法,只取自身有的属性: hasDontEnumBug = !({toString: null}).propertyIsEnumerable('toString'), //ie6一下,!之后的内容为false; dontEnums = [ 'toString', 'to

  • bootstrap中添加额外的图标实例代码

    bootstrap中添加额外的图标实例代码

    说明 可以针对校验状态为输入框添加额外的图标.只需设置相应的 .has-feedback 类并添加正确的图标即可 示例 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <m

  • 在Vue组件中获取全局的点击事件方法

    使用场景: 在Vue组件中点击某元素之外的地方移除该元素 需求: 如上图所示,"用户列表"页面有三个Vue组件组成,分别是"菜单组件","导航组件"和"列表组件".其中"列表组件"中包含一个"下拉菜单",当我们点击"下拉菜单"以外的区域隐藏下拉菜单. 解决方法一: 出现"下拉菜单"的同时,建一个透明的遮罩层,然后只有"下拉菜单"

  • Python字符串中添加、插入特定字符的方法

    分析 我们将添加.插入.删除定义为: 添加 : 在字符串的后面或者前面添加字符或者字符串 插入 : 在字符串之间插入特定字符 在Python中,字符串是不可变的.所以无法直接删除.插入字符串之间的特定字符. 所以想对字符串中字符进行操作的时候,需要将字符串转变为列表,列表是可变的,这样就可以实现对字符串中特定字符的操作. 1.添加字符实现 添加字符或字符串 如果想在字符串 土堆 后面或者前面添加 碎念 字符串. 可以使用 + 号实现字符串的连接,或者使用方法 .join() 来连接字符串. .j

  • Android中正确使用字体图标(iconfont)的方法

    Android中正确使用字体图标(iconfont)的方法

    字体图标 字体图标是指将图标做成字体文件(.ttf),从而代替传统的png等图标资源. 使用字体图标的优点和缺点分别为: 优点: 1. 可以高度自定义图标的样式(包括大小和颜色),对于个人开发者尤其适用 2. 可以减少项目和安装包的大小(特别你的项目中有很多图片icon时,效果将是M级) 3. 几乎可以忽略屏幕大小和分辨率,做到更好的适配 4. 使用简单 -- 缺点:        1. 只能是一些简单的icon,不能代替如背景图.9图等资源 2. 一些需要文字说明的icon,图片资源将会是更好

  • Element-UI Table组件上添加列拖拽效果实现方法

    Element-UI 的 Table组件很强大,但是我们的需求更强大... 简单粗暴的来一发效果图: 一.数据驱动 传统的拖动效果,都是基于通过 mousedown.mousemove.mouseup 事件来修改删减 dom 节点 但 Vue 是一个数据驱动的前端框架,开发时应尽量避免操作 dom 而且 Element-UI 的 Table 组件封装得很严谨,直接操作 dom 很容易产生不可预计的 bug 所以我的核心思路就是:通过一个数组渲染表头(列),然后修改这个数组的顺序,从而修改列表的列

随机推荐