_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);
}
}
