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：是否禁用状态

plain：是否朴素按钮

autofocus：是否默认聚焦

round：是否圆角按钮

circle：是否圆形按钮

computed_elFormItemSize()，与formitem配合使用，计算formitem的size。

buttonSize()，用于计算button的大小。

buttonDisabled()，根据当前或者form的disabled状态确定button是否禁用。

methodshandleClick()，button按钮的click事件，用于触发实例上的方法。handleClick(evt) {

// 触发当前实例上的click事件

// 比如我们外部使用时，可以直接增加click方法

this.$emit('click',evt);

}

button部分的代码实际还好比较简单，下面看下他的group组件。

三、button-group组件

该组件与button组件配合使用，十分的简单，html部分的话，仅是在内嵌的button元素外嵌套了一层div元素。

JS的话，只是给组件增加了个name的名称属性。

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！