在元素界面的el按钮组件中添加自定义颜色和图标的实现方法

我使用的元素用户界面版本是V1.4.13.

如上图所示，如果使用el-button，类型属性的值可以通过添加颜色来设置，图标属性的值可以通过添加图标来设置。

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

为了方便开发，目前的解决方案是在element-ui的源代码中添加一个自定义的全局指令，并添加相应的组件。开发时，开发人员可以通过向类型添加不同的类值来添加颜色和图标。

1.向element-ui的按钮源代码中添加一个自定义指令otherRender和一个本地组件vRender

2.本地组件vRender的写入：

如果你不明白这里，你可以看看https://cn.vuejs.org/v2/guide/render-function.html的功能组件

3.自定义otherRender指令，并将其写入项目通用的js中。在这里，我首先定义了所有类对应的颜色类和图标。Css样式是根据需求定制的

然后在指令中循环添加

使用el-button时，只需添加相应的类型值即可使用，并显示相应的颜色和图标

让我们看一下自定义elementui中的图标

前提

Elementui图标库的图标较少

当您想要使用elementui的控件而不是它的图标时，您可以用自定义的方式来实现

实现

我的导出命名我的自定义图标

El-button class=' default ' icon=' El-icon-my-export ' export/El-button//使用图片替换//before属性中的内容文本用于占用空间，且必须具有//您可以设置字体大小来确定大小//使用visibility:隐藏；隐藏文本。El-icon-my-export { background : URL(/office house/resources/images/export . png)center no-repeat；背景尺寸：封面；}.{内容： '替换'之前的El-icon-my-export :font-size : 16px；visibility:隐藏；}//如果直接使用字体图片，//只需在before属性中设置相应的内容即可。El-icon-my-export { font-size : 16px；}.{ content: '\e611 '之前的El-icon-my-export :}内容中使用的汉字大小会正常，但汉字有时会出现乱码，可以用Unicode//编码，用\u66ff//替换。用css编写时，应删除{content3360' \ 66ff '之前的u . El-icon-my-export :font-size : 16px；visibility:隐藏；}其他控件的图标替换大多是这样的。当然，具体问题分析的时候，我不确定是否会有不同的情况。

摘要

以上是边肖介绍的在element-ui的el-button组件中添加自定义颜色和图标的实现方法。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！