下载掌阅APP，畅读海量书库
立即打开
Element为按钮提供了不同的样式与用法，本节将从基础用法、图标按钮、文字按钮、禁用状态、加载中、不同尺寸、按钮组等方面讲解按钮的样式与用法。本节首先结合地图展示按钮的样式，如图2-18所示；然后对按钮的样式与用法进行讲解。
图2-18 结合地图展示按钮的样式
在创建按钮样式前需要先创建Vue实例，由于本节的示例比较简单，因此data和methods都为空。
（1）基础用法。Element通过对el-button标签的封装来提供按钮，读者可以通过在el-button标签中设置type、plain、round和circle等属性来丰富按钮的样式。
（2）图标按钮。图标按钮将图标添加到了按钮中，只需要对el-button标签中的icon属性赋予不同图标名字即可实现图标按钮。代码如下：
（3）文字按钮。顾名思义，文字按钮将文字添加到了按钮中，只需要对el-button标签中的type属性赋予text值即可实现文字按钮。代码如下：
（4）禁用状态。禁用状态是指按钮不能被单击，将el-button标签中disabled属性的值设为true即可使按钮处于禁用状态。代码如下：
（5）加载中。加载中的按钮是指单击按钮后，数据还处于加载状态。只需要在el-button中添加loading属性并赋予true值即可实现加载中。代码如下：
（6）不同尺寸。不同尺寸是指对按钮的大小进行了规划。通过对el-button标签中的size属性赋予medium、small、mini等属性即可实现中等按钮、小型按钮、超小按钮。代码如下：
（7）按钮组。按钮组是指多个按钮在一起出现，通过使用el-button-group标签来嵌入按钮即可实现按钮组。代码如下：
