Element-UI 源码简析——Button篇

崇序猿
1,280 阅读2分钟

26d8116a7588ac4a91a8398280e436fe.png

序言

本章就来分享一下Element-ui 源码的Button篇，入手第一篇先找一个比较简单的入手吧。

组件流程

  1. 组件代码从 0 到 1 的过程
  2. 对应的组件引入install方法
  3. main.js 集体引入
  4. 使用Vue.use方法注册
  5. 最后页面中使用

最后呢 就是源码的位置了:packages/button/src/button.vue。

Button文件夹下有一个index.js用于注册组件然后抛出，src是用来放组件代码的，src下的button.vue就是咱们的but代码了，还有一个button-group.vue 这个是按钮组。

结构分析

分析的话 从三个方面着手：DOM结构，数据属性，事件

DOM结构

     <button>
         <i></i>
         <i></i>
         <span></span>
     </button>
     
     Element 源码
     <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="$slots.default"><slot></slot></span>
    </button>

Button整体相对相对比较简 单于理解的话 可能也比较好，一共就三个Html元素。接下来就来看看元素上面的属性值！

  • class="el-button" : 按钮样式

  • @click="handleClick" : 按钮的点击事件

  • disabled="buttonDisabled || loading" : 当主动禁用或者有loading的时候 都会触发按钮上的disabled

  • autofocus="autofocus" : 是否默认聚焦

  • type="nativeType" : but原始类型

  • class : 针对于样式的

    --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> : 承载加载动画的标签

  • <i class="icon" v-if="icon && !loading"></i> : 承载加载icon的标签

  • <span v-if="$slots.default"><slot></slot></span> : 不具名插槽

针对于Element组件中 Button组件 的Dom结构是比较简单的，代码中很多东西都是一目了然，那为什么Element的代码可以一目了然呢，这就 完完全全 实实在在的说明平时的编码规范有多么的重要呀！！！

这块的话 可以着重的看看Element团队针对于样式的处理 还是很不错的 非常的整洁，可以在借阅并且在项目中使用！！

数据属性

    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,
    },
    computed: {
        _elFormItemSize() {
            return (this.elFormItem || {}).elFormItemSize;
        },
        buttonSize() {
            return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
        },
        buttonDisabled() {
            return this.disabled || (this.elForm || {}).disabled;
        },
    }

------------------------------------------------分隔线----------------------------------------------- e34e84a020cfc292ad17412d84287422.png 拿出源码来上面的图片对比一下 是不是又有很多的代码一目了然了呢？

props咱们就不用讲了，大部分的属性都是平常经常见到的属性

这里比较少见的可能就是 inject 这个属性了

inject

  • 成对出现：provide和inject是成对出现的
  • 作用：用于父组件向子孙组件传递数据
  • 使用方法：provide在父组件中返回要传给下级的数据，inject在需要使用这个数据的子辈组件或者孙辈等下级组件中注入数据。
  • 使用场景：由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问父组件的数据

computed

  • _elFormItemSize()，与formitem配合使用，计算formitem的size。
  • buttonSize()，用于计算button的大小。
  • buttonDisabled()，根据当前或者form的disabled状态确定button是否禁用。

事件

 methods: {
     handleClick(evt) {
         this.$emit("click", evt);
     },
 }

针对于button组件的事件来讲的话，其实没有什么，就只有点击按钮的时触发的一个点击事件。

招聘广告

言重式招聘 寻人!!!寻志同道合之人、寻竭忠尽智之人、寻深思远虑之人、寻勤恳至诚之人
浙江大华技术股份有限公司-软研-智慧城市产品研发部招聘高级前端！！！！！
欢迎大家来聊，有意向可发送简历到chen_zhen@dahuatech.com

寒冷到了极致时，太阳就要光临 ———— 无奖竞猜
avatar
文章
阅读
粉丝