继续看其他组件，接下来看下比较常用的button组件。
一、button组件html结构
整个button组件是基于原生的button元素实现的。我们来看下这个元素的属性值。
class=”el-button”，el-button的样式。
@click=”handleClick”，按钮的click事件。
:disabled=”buttonDisabled || loading”，当按钮的使能或者loading时，disabled生效。
:autofocus=”autofocus”，是否自动聚焦。
:type=”nativeType”，原生的type属性，控制type的实际类型。
class则是一些样式的控制，不一一举例了，命名也大致可以看出了。
紧接着是一个loading时的icon图标。后面则是一个button图标。
接下来的span元素则存放着按钮的显示文字。
整个button的html就这么简单。
二、button组件JS部分
name
名称
inject
注入elForm和elFormItem，当没有配合表单使用时，当作默认值使用。
props
这些属性大多和样式的控制有关。
- type：按钮样式类型，默认是default类型
- size：按钮尺寸大小
- icon：icon的class类
- nativeType：原生 type 属性
- loading：是否加载中状态
- disabled：是否禁用状态
- plain：是否朴素按钮
- autofocus：是否默认聚焦
- round：是否圆角按钮
- circle：是否圆形按钮
computed
- _elFormItemSize()，与formitem配合使用，计算formitem的size。
- buttonSize()，用于计算button的大小。
- buttonDisabled()，根据当前或者form的disabled状态确定button是否禁用。
methods
- handleClick()，button按钮的click事件，用于触发实例上的方法。
handleClick(evt) {
// 触发当前实例上的click事件
// 比如我们外部使用时，可以直接增加click方法
this.$emit('click',evt);
}button部分的代码实际还好比较简单，下面看下他的group组件。
三、button-group组件
该组件与button组件配合使用，十分的简单，html部分的话，仅是在内嵌的button元素外嵌套了一层div元素。
JS的话，只是给组件增加了个name的名称属性。
带注释的源码下载路径：button组件和button-group组件。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。