@TOC

在前端开发中，界面的设计和交互是至关重要的一部分。一个直观、易用的界面往往离不开各种组件的运用。本文将聚焦于Element-ui中的两个常用组件——Icon图标和Button按钮，分别介绍它们的基本用法和一些实用技巧。Icon图标为界面添加了更多的元素，而Button按钮则是用户与页面进行交互的重要媒介，通过深入理解它们，我们可以更好地打造出美观、实用的前端界面。

提供了一套常用的图标集合。

直接通过设置类名为 el-icon-iconName 来使用即可。例如：

我们只需要使用i标签class为图标名称即可.如果你使用的是i标签 如果是其他，则使用icon属性

图标集合如下：

其效果如下：

常用的操作按钮。

基础的按钮用法。

使用type、plain、round和circle属性来定义 Button 的样式。 这些属性的意义如下：

参数 说明 类型 可选值 默认值 type 类型 string primary / success / warning / danger / info / text — plain 是否朴素按钮 boolean — false round 是否圆角按钮 boolean — false circle 是否圆形按钮 boolean — false

按钮不可用状态。

没有边框和背景色的按钮。

带图标的按钮可增强辨识度（有文字）或节省空间（无文字）。

设置icon属性即可，icon 的列表可以参考 Element 的 icon 组件，也可以设置在文字右边的 icon ，只要使用i标签即可，可以使用自定义图标。

以按钮组的方式出现，常用于多项类似操作。

使用标签来嵌套你的按钮。

点击按钮后进行数据加载操作，在按钮上显示加载状态。

要设置为 loading 状态，只要设置loading属性为true即可。

Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。 额外的尺寸：medium、small、mini，通过设置size属性来配置它们。

在本文中，我们深入了解了Element-ui中的Icon图标和Button按钮的基本用法和实用技巧。Icon图标为页面添加了更多的视觉元素，使得界面更加生动；而Button按钮则是用户与页面互动的纽带，通过丰富的配置选项，我们能够定制出符合项目需求的按钮样式。在实际项目中，熟练掌握这两个组件的用法，将有助于提升前端界面的设计水平，为用户提供更好的使用体验。希望本文能够为你在Element-ui的使用过程中提供一些有益的参考。