element-ui V1.4.13 中为 el-button 添加自定义颜色与图标的实现方案

element-ui 自定义按钮颜色与图标的指令实现

本文基于 element-ui 的 V1.4.13 版本进行说明。

如上图所示，在默认使用 el-button 组件时，若需设置按钮颜色，可通过配置 type 属性的值来实现；若需显示图标，则通过设置 icon 属性的值来完成。

现有一项产品需求，要求支持多种自定义类别，且不同类别的按钮需显示不同的颜色与图标组合，具体效果如下图所示：

为简化开发流程，当前采用的解决方案是：定义一个自定义全局指令，并在 element-ui 源码中集成对应的组件逻辑。开发人员在使用时，只需在 type 属性中指定对应的类名值，即可自动应用预设的颜色与图标。

具体实施步骤如下：首先在 element-ui 的 button 源码中引入自定义指令 otherRender，并注册一个局部组件 vRender。

关于局部组件 vRender 的具体代码写法，参考如下实现：

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

其次，定义自定义指令 otherRender，该指令通常放置在项目的公共 JavaScript 文件中。在此步骤中，需预先定义好各类别对应的颜色类名与图标映射关系。CSS 样式则根据具体业务需求进行自定义编写。

接着，在指令逻辑中通过循环遍历的方式，将上述定义的颜色与图标动态添加到按钮元素上。

在实际使用 el-button 组件时，只需在 type 属性中传入对应的类名值，系统即可自动渲染出预设的颜色与图标。

element-ui 控件自定义图标替换方案

此外，以下部分介绍如何在 element-ui 中实现自定义图标的替换。

实施前提

element-ui 自带的图标库可能无法满足所有设计需求，图标种类相对有限。

当希望使用 element-ui 的控件布局与交互，但不希望使用其内置图标时，可以通过自定义方式实现图标替换。

具体实现方法

以自定义图标类名 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 组件中添加自定义颜色和图标的实现方法，希望能为读者提供帮助。如有任何疑问，欢迎留言交流，作者将及时回复。感谢大家对本站的支持！