Element-ui源码解析(二):最简单的组件Button

好家伙,为了有足够的能力去开发组件,先研究一下别人的组件

开始抄袭模仿我们的行业标杆element-ui

 

找到Button组件的源码

 只有三个文件,看上去非常易读,开搞

 其中最重要的部分,自然是button.vue

<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="$slots.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
      },
      computed: {
        _elFormItemSize() {