html按钮使能,element-ui button和button-group组件源码学习

继续看其他组件，接下来看下比较常用的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：是否禁用状态