Element-UI源码——button按钮

button

常用的操作按钮。

button.vue

<template>
  <!-- 通过判断buttonDisabled计算属性 和 loading决定是否禁用按钮 
  autofocus原生属性是否聚焦
  nativeType原生type属性
  class使用了数组混合对象的写法，通过传入的type判断按钮的类型如(el-button--primary)
  buttonSize设定按钮的大小如(el-button--mini)
  剩下的就是是否禁用 是否加载中 是否朴素按钮 是否圆角按钮 是否圆形按钮 -->
  <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图标时展现 当loading正在加载时不展示 -->
    <i :class="icon" v-if="icon && !loading"></i>
    <!-- 插槽 可以传入图标 如下传入了一个右箭头
    <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button> -->
    <span v-if="$slots.default"><slot></slot></span>
  </button>
</template>
<script>
  export default {
    name: 'ElButton',
// 从祖先组件注入的elForm 和 elFormItem组件实例 这样可以在button中操作表单中的属性
    inject: {
      elForm: {
        default: ''
      },
      elFormItem: {
        default: ''
      }
    },

    props: {
      // 类型
      type: {
        type: String,
        default: 'default'
      },
      // 尺寸
      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: {
      // 使用elFormItem中的大小 elFormItemSize是elFormItem中的计算属性
      _elFormItemSize() {
        return (this.elFormItem || {}).elFormItemSize;
      },
      // 按钮的大小 本身的大小 或 elFormItem的大小 或 通过vue.use传入的大小如下
      // Vue.use(Element, { size: 'small', zIndex: 3000 })
      buttonSize() {
        return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
      },
      //2.15.7版本是否禁用 如果存在disabled属性使用自身的disabled 否则使用elForm上的disabled
      buttonDisabled() {
        return this.$options.propsData.hasOwnProperty('disabled') ? this.disabled : (this.elForm || {}).disabled;
      }
    },
    methods: {
      // 调用组件定义click事件 并将event事件作为参数传入
      handleClick(evt) {
        this.$emit('click', evt);
      }
    }
  };
</script>

其中对于inject注入的属性：

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

在el-form-item.vue中可以看到传入的是组件本身，这样可以在这样可以在button中操作表单中的属性

// el-form-item.vue
provide() {
	return {
		elFormItem: this
    };
}

el-button-group

以按钮组的方式出现，常用于多项类似操作。源码就是使用div进行包裹

<template>
  <div class="el-button-group">
    <slot></slot>
  </div>
</template>
<script>
  export default {
    name: 'ElButtonGroup'
  };
</script>