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

98 阅读 0 评论 65 点赞

我是靠谱客的博主暴躁小土豆，最近开发中收集的这篇文章主要介绍Elementui- Button 源码解析「开始造轮子啦～」，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

第一个是DOM结构

DOM结构：
<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
}
]"
>


<i class="el-icon-loading" v-if="loading"></i>


<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
},

第三个是方法&计算属性


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: ''
}
},

inject

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

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

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

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

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

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

源码是这样的：

<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篇 - 掘金