element-ui button 组件源码分享

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 值,样式表中有之对应的样式,如下图:

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

css 复制代码
.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

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

css 复制代码
.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函数中被访问和使用。

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

css 复制代码
.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 类型,默认""

3.2.8 autofocus 属性,是否默认聚焦,布尔类型,默认 flase

3.2.9 native-type 属性,原生 type 属性,string 类型,button / submit / reset,默认 button

3.2.9 button slot 卡槽分发:

举个栗子:

总结:

看似简单的 button 按钮,看完源码后会发现里面会有很多值得我们去学习去思考的知识,因此希望可以一直保持好奇心,将剩下的组件一并研究明白并分享出来。

关于 button 按钮的源码分享部分就先到这里了,由于篇幅比较长,这里就不再做基于源码后的 demo 分享了,有时间下次专门写一篇关于基于源码理解后的 button demo 分享。

相关推荐
wrx繁星点点27 分钟前
状态模式(State Pattern)详解
java·开发语言·ui·设计模式·状态模式
SoraLuna9 小时前
「Mac畅玩鸿蒙与硬件28」UI互动应用篇5 - 滑动选择器实现
macos·ui·harmonyos
martian66520 小时前
QT开发:掌握现代UI动画技术:深入解析QML和Qt Quick中的动画效果
开发语言·c++·qt·ui
初九之潜龙勿用1 天前
C#结合JS解决Word添加无效位图导致进程停滞的问题
javascript·ui·c#·word·asp.net
AI原吾1 天前
`psdparse`:解锁Photoshop PSD文件的Python密钥
python·ui·ai·photoshop·psdparse
赵锦川1 天前
nuiapp vue3 uni-ui uni.uploadFile 图片上传
javascript·vue.js·ui
dangoxiba1 天前
[Unity Demo]从零开始制作空洞骑士Hollow Knight第十八集:制作UI系统的主菜单界面和选择存档界面
ui
如风暖阳1 天前
浅谈UI自动化
ui·面试·自动化
番茄灭世神2 天前
Qt学习笔记第41到50讲
qt·ui·上位机
Olivia_vivi2 天前
WPF XAML
ui·wpf