element-ui button 组件源码分享

news2024/11/15 20:08:48

element-ui button 源码分享，基于对源码的理解，编写一个简单的 demo，主要分三个模块来分享：

一、button 组件的方法。

1.1 在方法这块，button 组件内部通过暴露 click 方法实现，具体如下：

二、button 组件的计算属性。

2.1 button 组件当中使用的三个计算属性如下：

三、button 组件的属性。

通过官网我们知道 button 有 size、type、plain、round、circle、loading、disabled、icon、autofocus、native-type 这些属性，那么它是怎么通过传入的这些属性来控制按钮样式的呢？让我们通过对源码的探索来破解它吧。

3.1 size 属性，一般控制按钮的大小，它的尺寸有三种 medium / small / mini，我们可以在源码当中找到这些设置，如下图所示：

3.1.1 通过上图我们知道，真正控制 button 尺寸的并不完全是 size 属性，那么还有什么其他影响因素呢？通过搜索我们在 watch 里面找到了 buttonSize 方法，源码里 buttonSize 方法的返回值来源于三个变量，优先使用所传入的 size 变量，如下图：

3.1.2 通过对 buttonSize 打印可以看到以下信息，如下图所示：

3.1.3 this._elFormItemSize 在哪里可以找到？作用是什么？

3.1.4 上面说了一堆，有人可能会迷惑，找这些东西干什么用呢？又能证明什么呢？莫慌，多一丢丢儿耐心往下看哈。

3.1.5 this.$ELEMENT 这个是全局的变量，在 /examples/entry.js 文件中进行全局设置

3.1.6 简单总结一下 button 按钮 size 属性：

button 按钮的 size 若传则取所传的值
button 按钮的 size 未传且不在 form 表单中，默认取 middle
button 按钮的 size 为传且在 form 表单中，且 form 表单有设置 size，这取 form 表单的 size
button 按钮的 size 未传且不在 form 表单中，但设置了全局变量 $ELEMENT.size，则取全局变量中的 size

3.2 type 属性，控制按钮的样式，类型有 primary / success / warning / danger / info / text

3.2.1 通过传入 type 值，样式表中有之对应的样式，如下图：

上面的样式翻译过来大致是这样的：

.el-button--primary:first-child {  
  border-right-color: rgba($--color-white, 0.5);  
}  
  
.el-button--primary:last-child {  
  border-left-color: rgba($--color-white, 0.5);  
}  
  
.el-button--primary:not(:first-child):not(:last-child) {  
  border-left-color: rgba($--color-white, 0.5);  
  border-right-color: rgba($--color-white, 0.5);  
}  
  
.el-button--success:first-child {  
  border-right-color: rgba($--color-white, 0.5);  
}  
  
.el-button--success:last-child {  
  border-left-color: rgba($--color-white, 0.5);  
}  
  
.el-button--success:not(:first-child):not(:last-child) {  
  border-left-color: rgba($--color-white, 0.5);  
  border-right-color: rgba($--color-white, 0.5);  
}  
  
.el-button--warning:first-child {  
  border-right-color: rgba($--color-white, 0.5);  
}  
  
.el-button--warning:last-child {  
  border-left-color: rgba($--color-white, 0.5);  
}  
  
.el-button--warning:not(:first-child):not(:last-child) {  
  border-left-color: rgba($--color-white, 0.5);  
  border-right-color: rgba($--color-white, 0.5);  
}  
  
.el-button--danger:first-child {  
  border-right-color: rgba($--color-white, 0.5);  
}  
  
.el-button--danger:last-child {  
  border-left-color: rgba($--color-white, 0.5);  
}  
  
.el-button--danger:not(:first-child):not(:last-child) {  
  border-left-color: rgba($--color-white, 0.5);  
  border-right-color: rgba($--color-white, 0.5);  
}  
  
.el-button--info:first-child {  
  border-right-color: rgba($--color-white, 0.5);  
}  
  
.el-button--info:last-child {  
  border-left-color: rgba($--color-white, 0.5);  
}  
  
.el-button--info:not(:first-child):not(:last-child) {  
  border-left-color: rgba($--color-white, 0.5);  
  border-right-color: rgba($--color-white, 0.5);  
}

3.2.2 plain 属性，是否朴素按钮，布尔类型，默认 false

上面的样式翻译过来大致是这样的：

.is-plain,  
.is-plain:hover,  
.is-plain:focus {  
  background-color: $--color-white;  
  border-color: $--button-disabled-border-color;  
  color: $--button-disabled-font-color;  
}

3.2.3 round 属性，是否圆角按钮，布尔类型，默认 false

3.2.4 circle 属性，是否圆形按钮，布尔类型，默认 false

3.2.5 loading 属性，是否加载中状态，布尔类型，默认 false

注意：如果使用了自定义图标 icon，可以使用 element-ui icon 组件里面有的图标，也可以自定义一个图标，其实在这里传的 icon 就是 class（通过上面的图很容易看出）。

3.2.6 disabled 属性，是否禁用状态，布尔类型，默认 false

补充说明（buttonDisabled）：

tip1：在 Vue 2 中，this.$options 是一个对象，它包含了组件的初始化选项。这些选项是组件定义时通过 option 属性传入的。通过 this.$options，你可以访问到组件的配置信息，包括生命周期钩子函数、自定义方法、属性等。

tip2：Vue2的 propsData 主要用于在组件初始化时传递数据。propsData 选项是一个对象，其中包含了要传递给组件的属性值。这些属性值可以在组件的data函数中被访问和使用。

上面的样式翻译过来大致是这样的：

.disabled,  
.disabled:hover,  
.disabled:focus {  
  color: $--button-disabled-font-color;  
  cursor: not-allowed;  
  background-image: none;  
  background-color: $--button-disabled-background-color;  
  border-color: $--button-disabled-border-color;  
}  
  
.el-button--text.disabled {  
  background-color: transparent;  
}  
  
.is-plain.disabled,  
.is-plain.disabled:hover,  
.is-plain.disabled:focus {  
  background-color: $--color-white;  
  border-color: $--button-disabled-border-color;  
  color: $--button-disabled-font-color;  
}

3.2.7 disabled 属性，图标类名，string 类型，默认""