Element分析（组件篇）——Button

_index.js

由于按钮组件可能用到按钮组，因此多写了一个button-group组件。

import ElButton from './src/button';
import ElButtonGroup from './src/button-group';

export default function(Vue) {
  Vue.component(ElButton.name, ElButton);
  Vue.component(ElButtonGroup.name, ElButtonGroup);
};

export {
  ElButton,
  ElButtonGroup
};

---

Button Group按钮组

按钮组的实现十分简单，就是加了一层div.el-button-group包裹，内置一个slot用来放置按钮，因为按钮组主要是要改变样式，会将内部的按钮向左浮动。

<template>
  <div class="el-button-group">
    <slot></slot>
  </div>
</template>

---

Button按钮

el-button组件是一个原生button，里面有三部分，分别是loading 加载、icon 图标以及$slots.default 按钮文本这三部分组成。

<template>
  <button
    class="el-button"
    :disabled="disabled"
    :autofocus="autofocus"
    :type="nativeType"
    :class="[
      type ? 'el-button--' + type : '',
      size ? 'el-button--' + size : '',
      {
        'is-disabled': disabled,
        'is-loading': loading,
        'is-plain': plain
      }
    ]"
    @click="handleClick"
  >
    <i class="el-icon-loading" v-if="loading"></i>
    <i :class="'el-icon-' + icon" v-if="icon && !loading"></i>
    <span v-if="$slots.default">
      <slot></slot>
    </span>
  </button>
</template>

button包裹

最外层是一个button，用来包裹整个组件，上面进行了一些处理，我们在这依次进行讲解。

disabled

首先是一个disabled的prop，这是一个Boolean类型的属性，用来控制按钮是否可用。

props: {
  disabled: Boolean
}

autofocus

然后是一个autofocus的prop，和disabled类似，也是Boolean类型的，用来控制是否自动聚焦。

props: {
  autofocus: Boolean
}

type

type被赋值为nativeType的prop，这是一个String类型的prop，这是用来设置原生button的type的。而另一个type的prop是用来设置相关按钮样式的。

props: {
  type: {
    type: String,
    default: 'default'
  },
  nativeType: {
    type: String,
    default: 'button'
}

动态class

根据type，size，disabled，loading，plain五个属性，分别设置了不同的类，他们都是prop，一次列举如下：

props: {
  type: {
    type: String,
    default: 'default'
  },
  size: String,
  loading: Boolean,
  disabled: Boolean,
  plain: Boolean,
}

点击事件

click事件绑定了handleClick回调函数，它会向父组件发一个click事件。

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