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: 'el-icon-more' },

{ content: '支持自定义颜色', timestamp: '2018-04-03 20:46', color: '#0bbd87' },

{ content: '支持自定义尺寸', timestamp: '2018-04-03 20:46', size: 'large' },

{ content: '默认样式的节点', timestamp: '2018-04-03 20:46' }]

10折叠面板

<el-collapse v-model="activeName" accordion @change='返回的是activeName'>

//activeName默认展开标识--->name

//accordion 手风琴模式

<el-collapse-item title="一致性 Consistency" name="1">

<div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>

<div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>

</el-collapse-item>

<el-collapse-item title="反馈 Feedback" name="2">

<div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>

<div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>

</el-collapse-item>

</el-collapse>

11对话框+MessageBox 弹框

1适合做单纯提醒弹框，无逻辑操作

this.$message({ type: 'success', message: '你的邮箱是: ' + value });

2 适合2次弹框，有提交信息

this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' ，center: true}).

then(() => { this.$message({ type: 'success', message: '删除成功!' }); }).

catch(() => { this.$message({ type: 'info', message: '已取消删除' }); });

12步揍条

<el-steps :active="active" finish-status="success" align-center  direction="vertical">

//:active 设置当前激活步骤

//finish-status  设置结束步骤的状态（wait / process / finish / error / success）

//align-center 居中

//direction="vertical" 纵向步骤条

<el-step title="步骤 1" description="这是一段很长很长很长的描述性文字"></el-step>

<el-step title="步骤 2"></el-step>

<el-step title="步骤 3"></el-step>

</el-steps>

13tab页

<el-tabs v-model="activeName" @tab-click="handleClick" type="border-card"> 

//activeName   选中选项卡的 name

//type='card/border-card'风格类型

//@tab-click   tab 被选中时触发

handleClick(tab, event) { console.log(tab, event); }

<el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>

<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>

<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>

<el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>

</el-tabs>

14loading

直接在body或者div上加

v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)"

15 Pagination 分页

16表格

进行居中对齐