初识Element组件库源码

这一系列的文章主要立足ElementUI组件库，从源码出发，一步一步探索Element的设计思想，以及具体的实现方式。

一、Element源码下载

首先我们要到Element的GitHub官网去下载最新的包，Element在github上的star数量足以表明它在广大前端程序员心中的地位

git地址
下载完成之后我们用编辑器打开，会看到如下的目录。

二、目录分析

我们主要介绍examples、packages、src这三个目录，其他目录都是一些测试、构建相关的目录，现阶段我们还接触不到。

• examples目录其实就是我们在Element官网上看到的组件，这个文件夹里面主要放每一个组件对应的案例。

• packages目录里面主要放如何实现组件的代码，每一个组件都分为一个src文件和一个index文件，src里面存放对应的vue文件，index主要将对应的文件暴露出去。

• 

• src目录里面有一个main或者index主要是将所有的组件都进行注册挂载，以及书写一些公用的函数，动画、mixins等。

三、el-button、el-button-group组件实现

el-button中button相关源代码

<template>
  <button
    class="el-button"
    @click="handleClick"
    :disabled="buttonDisabled || loading"
    :autofocus="autofocus"
    :type="nativeType"
    //动态设置class 根据不同的props显示不同的样式
    :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="$slots.default"><slot></slot></span>
  </button>
</template>

<script>
   
  export default {
    name: 'ElButton',
    //inject 和provider 结合使用，也是父子组件通信的一种方式，可以全局监听不仅仅局限父子组件之间，多层的组件嵌套也可以通过provider inject进行传值
    inject: {
      elForm: {
        default: ''
      },
      elFormItem: {
        default: ''
      }
    },
	//使用props进行父子组件之间的传值，通过props接收到的值来进行组件不同样式的渲染
    props: {
    //按钮类型  支持 primary / success / warning / danger / info / text
      type: {
        type: String,
        default: 'default'
      },
      //按钮大小 支持 medium / small / mini
      size: String,
      //按钮图标
      icon: {
        type: String,
        default: ''
      },
      //原生的type属性
      nativeType: {
        type: String,
        default: 'button'
      },
      //是否为加载
      loading: Boolean,
      //是否禁用
      disabled: Boolean,
      //是否为朴素按钮
      plain: Boolean,
      //是否自动聚焦
      autofocus: Boolean,
      //是否为圆角按钮
      round: Boolean,
      //是否为圆形
      circle: Boolean
    },
   //computed 里面主要是表单按钮的一些属性
    computed: {
      //判断表单的大小
      _elFormItemSize() {
        return (this.elFormItem || {}).elFormItemSize;
      },
      //尺寸
      buttonSize() {
        return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
      },
      //是否禁用
      buttonDisabled() {
        return this.disabled || (this.elForm || {}).disabled;
      }
    },

    methods: {
    //将按钮上绑定的click事件通过$emit进行抛出到父组件中，
 	  handleClick(evt) {
        this.$emit('click', evt);
      }
    }
  };
</script>
 

el-button-group中相关源代码

<template>
  <div class="el-button-group">
    <slot></slot>
  </div>
</template>
<script>
//  通过slot槽口，可以在 <el-button-group></el-button-group> 标签里面书写多个el-button，实现按钮组的效果
export default {
  name: "ElButtonGroup",
};
</script>

总结

今天我们主要从el-button、el-button-group出发，先对这种大型的UI组件库里面实现组件的方式方法有一个初步的认知，后面我们在不断循序渐进做更加深层次的学习和总结。奥里给