Elementui- Button 源码解析「开始造轮子啦～」

Button部分源码包含了三个大的方面。

第一个是DOM结构

DOM结构：

复制代码<template> <!-- 1.按钮样式 --> <!-- 2.点击事件 --> <!-- 3.当主动禁用或者loading的时候，都会触发按钮的disabled --> <!-- 是一个整体，整个括号括起来，还得紧紧的挨着等号 --> <!-- 4.是否默认聚焦 --> <!-- 5.Button 原始类型 --> <!-- class --> <!-- 最开始的是类名 --> <!-- 后面的那个是属性 --> <!-- class里面最先是类型，然后是能否禁用 然后是风格和形状 --> <button class="el-button" @click="handleClick" :disabled="buttonDisabled || loading" :autofocus="autofocus" :type="nativeType" :class="[ type ? 'el-button--' + type : '', buttonSize ? 'el-button--' + buttonSize : '', { 'is-disabled': buttonDisabled, 'is-loading': loading, 'is-plain': plain, 'is-round': round, 'is-circle': circle } ]" > <!-- 动画 --> <!-- 在loading，就出现这个表情 --> <i class="el-icon-loading" v-if="loading"></i> <!-- icon --> <!-- icon存在，并且loading不存在 --> <i class="icon" v-if="icon && ! loading"></i> <!-- 插槽 --> <span v-if="$slot.default"><slot></slot></span> </button> </template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<template>
<!-- 1.按钮样式 -->
<!-- 2.点击事件 -->
<!-- 3.当主动禁用或者loading的时候，都会触发按钮的disabled -->
<!-- 是一个整体，整个括号括起来，还得紧紧的挨着等号 -->
<!-- 4.是否默认聚焦 -->
<!-- 5.Button 原始类型 -->
<!-- class -->
<!-- 最开始的是类名 -->
<!-- 后面的那个是属性 -->
<!--
class里面最先是类型，然后是能否禁用
然后是风格和形状
-->
<button
class="el-button"
@click="handleClick"
:disabled="buttonDisabled || loading"
:autofocus="autofocus"
:type="nativeType"
:class="[
type ? 'el-button--' + type : '',
buttonSize ? 'el-button--' + buttonSize : '',
{
'is-disabled': buttonDisabled,
'is-loading': loading,
'is-plain': plain,
'is-round': round,
'is-circle': circle
}
]"
>
<!-- 动画 -->
<!-- 在loading，就出现这个表情 -->
<i class="el-icon-loading" v-if="loading"></i>
<!-- icon -->
<!-- icon存在，并且loading不存在 -->
<i class="icon" v-if="icon && ! loading"></i>
<!-- 插槽 -->
<span v-if="$slot.default"><slot></slot></span>
</button>
</template>

里面有较为清晰的注释。

在这里再写一遍

 class="el-button"         -> 按钮样式

@click="handleClick"   -> 点击事件

:disabled="buttonDisabled || loading" -> 当主动禁用或者loading的时候，都会触发按钮的disabled

:autofocus="autofocus"        ->  是否默认聚焦

:type="nativeType"                 -> Button 原始类型

type ? 'el-button--' + type : '',         ->         控制颜色

buttonSize ? 'el-button--' + buttonSize : '',        -> buttonSize函数控制按钮的大小

        // 禁用
        'is-disabled': buttonDisabled,
        // 加载
        'is-loading': loading,
        // 用于控制其风格
        'is-plain': plain,
        // 用于控制其形状
        'is-round': round,
        // 用于控制其形状
        'is-circle': circle

    // 承载加载动画的标签
    <i class="el-icon-loading" v-if="loading"></i>
    // 承载加载icon的标签
    <i :class="icon" v-if="icon && !loading"></i>
    // 不具名插槽
    <span v-if="$slots.default"><slot></slot></span>

第二个是属性注册

复制代码props: { type: { type: String, default: 'default' }, size: String, icon: { type: String, default: '' }, nativeType: { type: String, default: 'button' }, loading: Boolean, disabled: Boolean, plain: Boolean, autofocus: Boolean, round: Boolean, circle: Boolean },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

props: {
type: {
type: String,
default: 'default'
},
size: String,
icon: {
type: String,
default: ''
},
nativeType: {
type: String,
default: 'button'
},
loading: Boolean,
disabled: Boolean,
plain: Boolean,
autofocus: Boolean,
round: Boolean,
circle: Boolean
},

第三个是方法&计算属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

computed: {
_elFormItemSize() {
return (this.elFormItem || {}).elFormItemSize;
},
buttonSize() {
return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
},
buttonDisabled() {
return this.$options.propsData.hasOwnProperty('disabled') ? this.disabled : (this.elForm || {}).disabled;
}
},
methods: {
// 点击事件
handleClick(evt) {
// 上传到了click这个事件，evt则是传的值
this.$emit('click', evt);
}
}

注意：

还有inject！：

复制代码inject: { elForm: { default: '' }, elFormItem: { default: '' } },

1
2
3
4
5
6
7
8
9

inject: {
elForm: {
default: ''
},
elFormItem: {
default: ''
}
},

inject

成对出现：provide和inject是成对出现的

使用方法：provide在父组件中返回要传给下级的数据

inject在需要使用这个数据的子辈组件或者孙辈等下级组件中注入数据。

使用场景：由于vue有$parent属性可以让子组件访问父组件。

但孙组件想要访问祖先组件就比较困难。

通过provide/inject可以轻松实现跨级访问父组件的数据

源码是这样的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<template>
<button
class="el-button"
@click="handleClick"
:disabled="buttonDisabled || loading"
:autofocus="autofocus"
:type="nativeType"
:class="[
type ? 'el-button--' + type : '',
buttonSize ? 'el-button--' + buttonSize : '',
{
'is-disabled': buttonDisabled,
'is-loading': loading,
'is-plain': plain,
'is-round': round,
'is-circle': circle
}
]"
>
<!-- 动画 -->
<!-- 在loading，就出现这个表情 -->
<i class="el-icon-loading" v-if="loading"></i>
<!-- icon -->
<!-- icon存在，并且loading不存在 -->
<i class="icon" v-if="icon && ! loading"></i>
<!-- 插槽 -->
<span v-if="$slot.default"><slot></slot></span>
</button>
</template>
<script>
export default {
name:'ElButton',
inject: {
elForm:{
default:"",
},
elFormItem:{
default:"",
}
},
// 注册一箩筐属性
props:{
type:{
type:String,
default:"default"
},
size:String,
icon:{
type:String,
default:""
},
nativeType:{
type:String,
default:"button"
},
loading: Boolean,
disabled: Boolean,
plain: Boolean,
autofocus: Boolean,
round: Boolean,
circle: Boolean
},
methods:{
handleClick(evt){
// emit前面是属性名
// click
// evt是传入的参数
this.$emit('click',evt);
}
},
computed:{
buttonDisabled() {
return this.$options.propsData.hasOwnProperty('disabled') ? this.disabled : (this.elForm || {}).disabled;
},
_elFormItemSize() {
// elFormItemSize 应该是本身的一个属性
return (this.elFormItem || {}).elFormItemSize;
},
buttonSize() {
return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
}
}
}
</script>
<style>
</style>

参考博客

Element-UI 源码简析——Button篇 - 掘金

最后

以上就是暴躁小土豆最近收集整理的关于Elementui- Button 源码解析「开始造轮子啦～」的全部内容，更多相关Elementui-内容请搜索靠谱客的其他文章。