刚刚开始当然是选择那些简单的组件开始入手，比如 Icon 组件，Button 组件。虽然Icon 组件看了半天也没看懂...。
Icon
使用方法
官方使用方法： 直接通过设置类名为 el-icon-iconName 来使用即可。
<i class="el-icon-delete"></i>
<el-button type="primary" icon="el-icon-search">搜索</el-button>
代码
看代码是根据name 的传值进去，然后动态设置 class 的名称，来显示图标。
图标是在类名后面使用伪元素：before， 然后插入 content，来显示。
存疑部分：看官网的使用方式<i class="el-icon-delete"></i>,并没有使用到组件，更像是直接使用 css 样式。
Button
使用方法
<el-button type="warning">警告按钮</el-button>
一个 el-button 标签，可以直接使用 button 组件，直接在标签里面调整组件的样式，包括大小，类型，是否禁用等。
代码
<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>
以上是模板的代码，只有一个 button 标签，所有的东西都是通过传值设置。
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
},
通过props 传值。我们来详细看看具体的代码作用。
type
:type="nativeType"
type: {
type: String,
default: 'default'
},
这是用来设置按钮的类型，比如警告，成功等。
size
buttonSize ? 'el-button--' + buttonSize : '',
size: String,
这是用来设置按钮的的大小。
**其它 **
:disabled="buttonDisabled || loading"
:autofocus="autofocus"
:class="[
{
'is-disabled': buttonDisabled,
'is-loading': loading,
'is-plain': plain,
'is-round': round,
'is-circle': circle
}
]"
loading: Boolean,
disabled: Boolean,
plain: Boolean,
autofocus: Boolean,
round: Boolean,
circle: Boolean
这是设置按钮是否圆形，是否在加载状态，是否朴素等。这里处理的是，把所有布尔值的都放到一个props 数组对象里面。值得学习。
注意点
$slots.default 是包括了所有没有被包含在具名插槽中的节点。
<span v-if="$slots.default"><slot></slot></span>
也就是说当我们当这个插槽没有内容是，这个 span 标签将会不显示。
当我们这样子写的时候：
<span><slot></slot></span>
当没有内容的时候，可以看到这里有一个空白的 span 标签。并且会占用空间。
按钮组
这是另一个组件，button-group.vue 的写法。外面包裹一个 div，然后里面是 slot 插槽。放置 button 组件。
<div class="el-button-group">
<slot></slot>
</div>
