element-ui button和button-group组件源码学习

2018年10月16日Web前端

继续看其他组件,接下来看下比较常用的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组件