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 分享。

相关推荐
UI罐头6 小时前
后台设计指南:系统架构、交互规范与工具实战全流程解析
ui·设计·设计工具
UI前端开发工作室9 小时前
UI前端与数字孪生融合新领域拓展:智慧教育的虚拟实验室建设
ui
前端开发与ui设计的老司机16 小时前
从数据洞察到设计变革:UI前端如何利用数字孪生重塑用户体验?
ui·ux
前端开发与ui设计的老司机17 小时前
大数据时代UI前端的智能化升级:基于机器学习的用户意图预测
大数据·ui
前端开发与ui设计的老司机1 天前
从UI设计到数字孪生实战:构建智慧教育的个性化学习平台
学习·ui
前端世界1 天前
鸿蒙UI开发全解:JS与Java双引擎实战指南
javascript·ui·harmonyos
共享ui设计和前端开发人才2 天前
数字孪生技术引领UI前端设计新风向:跨领域数据融合的可视化
ui
UI设计和前端开发从业者2 天前
大数据时代UI前端的智能化转型之路:以数据为驱动的产品创新
大数据·前端·ui
desssq2 天前
嘉立创黄山派下载watch ui demo 教程(sf32)
ui·嵌入式·嘉立创·黄山派
写不出来就跑路2 天前
基于 Vue 3 的智能聊天界面实现:从 UI 到流式响应全解析
前端·vue.js·ui