深圳市手机网站建设公司,东莞企业营销型网站策划,php网站开发教学,响应式网站素材element-ui button 源码分享#xff0c;基于对源码的理解#xff0c;编写一个简单的 demo#xff0c;主要分三个模块来分享#xff1a; 一、button 组件的方法。
1.1 在方法这块#xff0c;button 组件内部通过暴露 click 方法实现#xff0c;具体如下#xff1a; 二、…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 表单中默认取 middlebutton 按钮的 size 为传且在 form 表单中且 form 表单有设置 size这取 form 表单的 sizebutton 按钮的 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你可以访问到组件的配置信息包括生命周期钩子函数、自定义方法、属性等。
tip2Vue2的 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 类型默认 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 分享。
