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

Element UI 是一个基于 Vue.js 的桌面端组件库，提供了丰富的 UI 组件，包括按钮组件 el-button。在实际开发中，为了满足需求，我们可能需要对 el-button 组件进行自定义，比如添加自定义颜色和图标。本文就来详细讲解如何实现这一功能。

添加自定义颜色

我们可以通过为 el-button 组件添加 class 属性，再在 CSS 中设置该类的样式来实现自定义颜色。以下是示例代码：

<el-button class="my-button">自定义颜色按钮</el-button>

.my-button {
  background-color: #4caf50;
  color: #fff;
}

上述代码将 el-button 组件添加了一个名为 my-button 的类，并为该类设置了背景颜色和文字颜色。

添加自定义图标

Element UI 默认提供了一些图标，但是在实际开发中，我们可能需要使用自定义的图标。我们首先需要在 HTML 中引入图标的 CSS 文件，然后在 el-button 组件中添加 icon 属性，并将其设置为我们自定义图标的类名。以下是示例代码：

<!-- 引入图标的 CSS -->
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- 添加自定义图标 -->
<el-button icon="fa fa-heart">自定义图标按钮</el-button>

上述代码使用了 Font Awesome 图标库中的 fa-heart 图标进行自定义。需要注意的是，使用自定义图标的时候，需要确保所使用的图标类存在于引入的 CSS 文件中。

另外，如果想要使用 Element UI 默认提供的图标，只需要将 icon 属性设置为其中之一即可。例如：

<el-button icon="el-icon-arrow-right">默认箭头图标按钮</el-button>

上述代码使用了 Element UI 提供的 el-icon-arrow-right 图标进行自定义。

以上是添加自定义颜色和图标的实现方法，希望对大家有所帮助。