element-ui组件库
1引用方式：
1）npm i element-ui -S
2）<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
2配合vue项目
在 main.js 中写入以下内容：
import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import App from './App.vue'; Vue.use(ElementUI); new Vue({ el: '#app', render: h => h(App) });3组件说明
1，栅格布局
:span="24"长度:span='6' 占格数:gutter="20" 列间距:offset="6" 栅格左侧的间隔格数type="flex" justify="center' align='center'启用flex布局- ：push =‘6’ 栅格向右移动格数
- ：pull=‘8’ 栅格向左移动格数
<el-row :gutter="20">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
2图标库
直接通过设置类名为 el-icon-iconName 来使用即可。例如：<i class="el-icon-edit"></i>
3单选框
只需要设置v-model绑定变量radio，选中的就是相应单选框 的label的值。可设置默认选中的值
disabled 禁用
border 带边框
<template>
<el-radio v-model="radio" label="1">备选项</el-radio>
<el-radio v-model="radio" label="2">备选项</el-radio>
</template>
组合互斥：
<el-radio-group v-model="radio" @ change=‘返回选中的label值’>
<el-radio :label="3">备选项</el-radio>
<el-radio :label="6">备选项</el-radio>
<el-radio :label="9">备选项</el-radio>
</el-radio-group>
4多选框
在el-checkbox元素中定义v-model绑定变量，单一的checkbox中，默认绑定变量的值会是Boolean，选中为true。
disabled 禁用
<template>
<!-- `checked` 为 true 或 false -->
<el-checkbox v-model="checked">备选项</el-checkbox>
</template>
组合+全选：
在 Group 中使用v-model绑定Array类型的变量即可。 el-checkbox 的 label属性是该 checkbox 对应的值，
indeterminate 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果
:min="1" :max="2" 限制选中个数
checkAll控制全选
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="返回选中的label值">全选</el-checkbox>
<el-checkbox-group v-model="checkList" @change="返回选中的label值">
<el-checkbox label="复选框 A"></el-checkbox>
<el-checkbox label="复选框 B"></el-checkbox>
<el-checkbox label="复选框 C"></el-checkbox>
<el-checkbox label="禁用" disabled></el-checkbox>
<el-checkbox label="选中且禁用" disabled></el-checkbox>
</el-checkbox-group>
4 input
clearable 带清空按钮 @clear=‘fun'
show-password 密码框
prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。
size="medium" large、small 和 mini 三种尺寸
maxlength 和 minlength 是原生属性，用来限制输入框的字符长度
<el-input placeholder="请输入内容" v-model="input" clearable> </el-input>
组合：input+搜索列表
5 计数器
:disabled="true" 禁用
:step="2" 步数
:precision="2" 控制小数位数
step-strictly属性接受一个Boolean。如果这个属性被设置为true，则只能输入步数的倍数。
<el-input-number v-model="num" @change="返回数值" :min="1" :max="10" label="描述文字"></el-input-number>
6 时间选择器
@change=‘返回选择的时间’
:picker-options="{selectableRange: '18:30:00 - 20:30:00'} 任意时间
:picker-options="{ start: '08:30', step: '00:15', end: '18:30' }"时间段
<el-time-select v-model="value" :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }" placeholder="选择时间"> </el-time-select>
组合：
1 固定时间段（结束时间大于开始时间minTime: startTime）
<el-time-select placeholder="起始时间" v-model="startTime" :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }"> </el-time-select>
<el-time-select placeholder="结束时间" v-model="endTime" :picker-options="{ start: '08:30', step: '00:15', end: '18:30', minTime: startTime }"></el-time-select>
2任意时间（结束时间大于开始时间）
<el-time-picker is-range v-model="value1" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围"> </el-time-picker>
value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
7 日期选择器
@change=‘返回选中时间或时间段’
value-format="yyyy-MM-dd" 获取到的时间格式（默认为date对象）timestamp时间戳format="yyyy 年 MM 月 dd 日" 日历上显示的格式
:picker-options="pickerOptions" 控制 选择的时间
pickerOptions: { disabledDate(time) { return time.getTime() > Date.now(); },
<el-date-picker v-model="value1" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"> </el-date-picker>
组合：
<el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
:default-time="['00:00:00', '23:59:59']"在选择日期范围时，指定起始日期和结束日期的默认时刻。
8 无限滚动
<template>
<ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto" infinite-scroll-disabled="disabled">
<li v-for="i in count" class="infinite-list-item">{{ i }}</li>
</ul>
<p v-if="loading">加载中...</p> <p v-if="noMore">没有更多了</p>
</template>
v-infinite-scroll 滑到底部触发函
infinite-scroll-disabled="disabled" 加载缓冲
load () { this.loading = true setTimeout(() => { this.count += 2 this.loading = false }, 2000) } }
9时间线
<el-timeline :reverse="reverse">//正序倒叙
<el-timeline-item v-for="(activity, index) in activities" :key="index"
:icon="activity.icon"//图标
:type="activity.type"//图标类型（自带）
:color="activity.color"//图标颜色
:size="activity.size"//图标大小
:timestamp="activity.timestamp">//时间线
{{activity.content}} </el-timeline-item>
</el-timeline>
activities: [
{ content: '支持使用图标', timestamp: '2018-04-12 20:46', size: 'large', type: 'primary', icon: