elementUI 框架组件

elementUI 框架学习笔记

1、创建一个vue-cli脚手架

• 初始化：vue init webpack
• 安装包：npm install
• 安装elementui：npm i element-ui -S
• 安装axios：npm install axios -S
• 安装router：npm install vue-router -S，并配置路由。
• 引入组件，配置路由。
• 启动项目：npm run dev

2、Container 布局容器

用于布局的容器组件，方便快速搭建页面的基本结构：

• ：外层容器。当子元素中包含 或 时，全部子元素会垂直上下排列，否则会水平左右排列。
  • 属性：
    • direction：指定子元素的排列方式，string类型，属性值：horizontal / vertical
• ：顶栏容器。
  • 属性：
    • height：顶部栏的高度，默认是60px，string类型。
• ：侧边栏容器。
  • 属性：
    • width：侧边栏的宽度，默认是300px，string类型。
• ：主要区域容器。
• ：底栏容器。
  • 属性：
    • height：页脚的高度，默认值是60px，string类型。

3、Layout 布局

​ 通过基础的 24 分栏，迅速简便地创建布局。通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局。如果一行中的列数之和大于24，则自动换行。

    12
    12

一行分为24分，其中有2列，每一列占12分。

el-row属性：

属性名	解释	值类型	默认值
:gutter	每一列之间的间隔距离	number	0
type	布局模式，可选flex，这样就可以通过justify 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。	string
align	flex 布局下的垂直排列方式	string（top/middle/bottom）

el-col属性：

属性名	解释	值类型	默认值
:span	栅格占据的列数	number	24
:offset	栅格左侧的间隔格数	number	0
:push	栅格向右移动格数	number	0
:pull	栅格向左移动格数	number	0

4、按钮 button

​ 使用 el-button标签来定义一个按钮，使用type、plain、round和circle属性来定义 Button 的样式。存在多种按钮，例如基础按钮、文字按钮、图标按钮、按钮组、加载按钮。

基础按钮：

​ 直接使用 el-button 标签，然后使用type使用执行按钮的类型。

结束考试

文字按钮：

​ 直接将 type 属性指定为 text 即可。

结束考试

图标按钮：

​ 设置icon属性即可，icon 的列表可以参考 Element 的 icon 组件，也可以设置在文字右边的 icon ，只要使用i标签即可，可以使用自定义图标。

 
搜索  
上传 

按钮组：

​ 使用标签来嵌套你的按钮。

    上一页
    下一页

加载按钮：

​ 要设置为 loading 状态，只要设置loading属性为true即可。

加载中

按钮的属性：

属性名	解释	属性值类型	默认值
size	尺寸	string（medium / small / mini）
type	指定按钮类型	string（primary / success / warning / danger / info / text）
plain	是否朴素按钮	boolean	false
round	是否圆角按钮	boolean	false
circle	是否圆形按钮	boolean	false
loading	是否加载中状态	boolean	false
disabled	是否禁用状态	boolean	false
icon	图标类名	string
autofocus	是否默认聚焦	boolean	false
native-type	原生 type 属性	string（button / submit / reset）	button

5、链接

​ 通过 el-link 这个标签就行链接和跳转。

默认链接

链接属性：

属性名	解释	属性值类型	默认值
type	执行链接的类型	string（primary / success / warning / danger / info）	default
:underline	是否下划线	boolean	true
disabled	是否禁用状态	boolean	false
href	跳转的地址	string
icon	图标类名	string

6、表单系列

6.1、input 输入框

​ 使用 el-input标签来定义一个输入框，用于接收用户的输入的数据。一般输入框会绑定一个 v-model来双向绑定数据。

6.1.1、基础用法

6.1.2、带icon的输入框

prefix-icon：
在input内的前面添加一个icon图标。

suffix-icon：在input内的最后面添加一个icon图标。

slot：

6.1.3、文本域输入框

属性：

属性名	解释	属性值类型	默认值
:rows	指定文本域的行数，超过这个行数就形成滚动条	number
:autosize	指定文本域可以自动调整大小，当超过指定的最大值也会出现滚动条	object
maxlength	限制最大的输入长度	string
show-word-limit	在文本域的右下角显示字数的统计，配合maxlength使用

6.1.4、复合型输入框

​ 可前置或后置元素，一般为标签或按钮。

一般还可以使用按钮进行组合复合输入框。

6.2、单选按钮

​ 使用el-radio标签用来表示一个单选按钮。

label属性就是绑定单选按钮的值，它的值类型可以是number、string、boolean。除了使用string类型，其他两个都要使用 :label 进行绑定。

6.2.1、单选按钮组

​ 使用el-radio-group标签，将单选按钮进行分组。

  选项1
  选项2
  选项3
  选项4

在一组的选项中，只要选择一个选项，其他选项就会进行排斥。

单选按钮组还给我们提供了一个change事件，当选择发生改变时就会触发对应的函数，它有这个参数是单选选中的值：

  选项1
  选项2
  选项3
  选项4

6.2.2、按钮单选

​ 只需要把el-radio元素换成el-radio-button元素即可，此外，Element 还提供了size属性。

  按钮1
  按钮2
  按钮3
  按钮4

6.2.3、属性

el-radio属性：

属性名	解释	属性值类型	默认值
label	单选项对应的值	string、number、boolean
disable	是否被禁用	boolean	false
border	是否显示边框	boolean	false

单选change 事件：当绑定的值发生改变时，触发该事件，事件会有一个选中的选项的值作为参数传递给回调函数。

6.3、多选按钮

​ 使用 el-checkbox 标签，实现可以选择多个选项。

篮球
羽毛球
游戏
女朋友

6.3.1、多选按钮组

​ 使用 el-checkbox-group标签将不同的多选按钮进行分组。

    篮球
    羽毛球
    游戏
    女朋友

可以指定min和max属性，设置为最少选几个和最多选几个。

6.3.2、indeterminate 状态

indeterminate 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果。实现一个全选和半全选功能。

6.3.3、按钮多选

​ 使用 el-checkbox-button 将多选的设置为按钮选择。

    篮球
    羽毛球
    游戏
    女朋友

6.3.4、属性

checkbox属性：

属性名	解释	属性值类型	默认值
true-label	选中时的值	string、number
false-label	没有选中时的值	string、number
disabled	是否被禁用	boolean	false
border	是否带有边框	boolean	false
checked	当前是否勾选	boolean	false
indeterminate	设置 indeterminate 状态，只负责样式控制	boolean	false

6.4、input-number计数器

只需要在el-input-number元素中使用v-model绑定变量即可，变量的初始值即为默认值。

属性：

属性名	解释	属性值类型	默认值
step	计数器步长	number	1
step-strictly	是否只能输入 step 的倍数	boolean	false
precision	数值精度	number
controls-position	控制按钮位置	string（right）

事件：

事件名	解释
change	绑定值被改变时触发
blur	在组件 Input 失去焦点时触发
focus	在组件 Input 获得焦点时触发

6.5、switch开关

属性：

属性名	解释	属性值类型	默认值
active-color	开时的背景颜色	string	#409EFF
inactive-color	关时的背景颜色	string	#C0CCDA
active-text	开时显示的文字	string
inactive-text	关时显示的文字	string
active-value	开时对应的值	boolean / string / number	true
inactive-value	关闭时的值	boolean / string / number	false
width	switch的宽度	number	40
active-icon-class	开时显示的图标，设置此项会忽略 active-text	string
inactive-icon-class	关时显示的图标，设置此项会忽略 active-text	string

6.6、Select 选择器

​ 使用 el-select标签来提供用户来选择，子元素为 el-option标签。

select的属性：

属性名	解释	属性值类型	默认值
v-model	绑定当前选择的属性值	boolean 、 string 、 number
multiple	是否多选，此时绑定的v-model就是选中组成的数组	boolean	false
collapse-tags	如果设置了多选，选择多个会将多个数据组成一个字符串显示	boolean	false
multiple-limit	如果设置多选，指定用户最多选择的数量，如果为0就是不限制	number	0
filterable	是否可以搜索	boolean	false
allow-create	是否允许用户创建新条目，需配合 filterable 使用	boolean	false
filter-method	自定义搜索方法	function
remote	是否支持远程搜索	boolean	false
remote-method	远程搜索方法	function
loading	是否正在从远程获取数据	boolean	false
no-match-text	搜索条件无匹配时显示的文字，也可以使用slot="empty"设置	string	无匹配数据
loading-text	远程加载时显示的文字	string	加载中
no-data-text	选项为空时显示的文字，也可以使用slot="empty"设置	string	无数据

select的事件：

事件名	解释	回调参数
change	当选中的值发生改变时	目前选中的值，如果存在多个参数就是一个数组
visible-change	下拉框出现/隐藏时触发	显示参数就是true，隐藏参数就是false
remove-tag	多选模式下移除tag时触发	移除的tag值
clear	可清空的单选模式下用户点击清空按钮时触发
blur	当 input 失去焦点时触发	(event: Event)
focus	当 input 获得焦点时触发	(event: Event)

el-option的属性：

属性名	解释	属性值类型	默认值
value	选项的值	string/number/object
label	选项的标签，若不设置则默认与 value 相同，就是显示的选项	string/number
disabled	是否禁用该选项	boolean	false

自定义选项的模板：

​ 将自定义的 HTML 模板插入el-option的 slot 中即可，显示自己想要的选项模板

    {{ item}}
    {{ index }}

6.7、Cascader 连级选择器

​ 只需为 Cascader 的options属性指定选项数组即可渲染出一个级联选择器。通过props.expandTrigger可以定义展开子级菜单的触发方式。

== options 属性的属性值必须是一个对象数组，一个对象表示一个选项，如果存在子级选项，就在选项对象中添加一个 children属性，这个属性也是一个数组，数组中包含子级的对象，每一个对象中都要包含 value和 label 属性，value属性就是选中时的值，label就是显示的文本。==

这个选择器的触发方式有两种，默认是点击时触发，可以设置props.expandTrigger属性，设置为鼠标移入就显示，:props="{ expandTrigger: 'hover' }"。

自定义节点内容：

​ 可以通过scoped slot对级联选择器的备选项的节点内容进行自定义，scoped slot会传入两个字段 node 和 data，分别表示当前节点的 Node 对象和数据。

级联面板：

用法与级联选择器一样。

el-cascader的属性：

属性名	解释	属性值类型	默认值
options	指定选项	object
show-all-levels	定义了是否显示完整的路径	boolean	true
props	用于一些级联配置	object
collapse-tags	多选模式下是否折叠Tag	boolean	false
separator	选项分隔符	string	" / "
filterable	是否可以搜索	boolean	false
filter-method	自定义搜索的方法，第一个参数是节点node，第二个参数是搜索关键词keyword，通过返回布尔值表示是否命中	function(node,keyword)

el-cascader的方法：

getCheckedNodes()，获取选中的节点，参数是一个布尔值，表示是否只是叶子节点，默认值为 false。

props的配置：

属性名	解释	属性值类型	默认值
expandTrigger	次级菜单的展开方式	string（click 、hover）	click
multiple	是否多选	boolean	false
checkStrictly	是否严格的遵守父子节点不互相关联，父节点也可以作为选项	boolean	false
emitPath	在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值	boolean	false

6.8、TimePicker 时间选择器

固定时间：

​ 使用 el-time-select 标签，分别通过start、end和step指定可选的起始时间、结束时间和步长

任意时间点：

选择方式有两种，默认是滑动鼠标进行选择。另一种是使用箭头进行选择，只需在标签中添加 arrow-control属性。

任意时间范围：

​ 添加is-range属性即可选择时间范围，同样支持arrow-control属性。

属性：

属性名	解释	属性值类型	默认值
readonly	完全只读	boolean	false
editable	文本框可输入	boolean	true

6.9、DatePicker 日期选择器

​ 使用 el-date-picker标签，进行日期的选择。

选择日期范围：

日期格式：

​ 使用format指定输入框的格式；使用value-format指定绑定值的格式。

6.10、DateTimePicker 日期时间选择器

​ 通过设置type属性为datetime，即可在同一个选择器里同时进行日期和时间的选择。快捷选项的使用方法与 Date Picker 相同。

日期和时间范围：

​ 设置type为datetimerange即可选择日期和时间范围。

属性：

属性名	解释	属性值 类型	默认值
type	显示的类型	string（year/month/date/week/ datetime/datetimerange/daterange）	date
format	显示在输入框中的格式	string	yyyy-MM-dd HH:mm:ss
value-format	可选，绑定值的格式。不指定则绑定值为 Date 对象	string
prefix-icon	自定义头部图标的类名	string
clear-icon	自定义清空图标的类名	string

6.11、upload上传

​ 使用 el-upload标签来进行用户的文件的上传。

    点击上传
    
只能上传jpg/png文件，且不超过500kb

属性：

属性名	解释	属性值类型	默认值
class	执行上传的样式	string（upload-demo普通上传、avatar-uploader头像上传）
action	上传的url地址	string
:limit	限制上传的文件个数	number
:on-exceed	当超出限制时的行为	function
multiple	是否支持多文件上传	boolean
data	上传额外带的参数	object
name	上传的文件字段名	string	file
drag	是否启动拖拽上传	boolean	false
show-file-list	是否显示上传的文件列表	boolean	true
on-preview	点击文件列表中已上传的文件时的钩子	function(file)，file是对应的文件对象
on-remove	文件列表移除文件时的钩子	function(file, fileList)，file是移除的文件对象，fileList移除后剩余的文件列表
on-success	文件上传成功时的钩子	function(response, file, fileList)
on-error	文件上传失败时的钩子	function(err, file, fileList)
before-remove	删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。	function(file, fileList)
auto-upload	是否在选取文件后立即进行上传	boolean	true

6.12、评分

​ 使用 el-rate标签进行选择评分。

​ 评分默认被分为三个等级，可以利用颜色数组对分数及情感倾向进行分级（默认情况下不区分颜色）。三个等级所对应的颜色用colors属性设置，而它们对应的两个阈值则通过 low-threshold 和 high-threshold 设定。你也可以通过传入颜色对象来自定义分段，键名为分段的界限值，键值为对应的颜色。

属性：

属性名	解释	属性值类型	默认值
v-model	绑定的值（1-5）	number	0
colors	三个等级对应的颜色显示	object数组
show-text	是否显示辅助文字	boolean	false
texts	设置显示的辅助文字，可以设置5个值，对应绑定的值	object数组	极差、失望、一般、满意、惊喜
icon-classes	自定义不同分段的图标，可以定义三个	object数组
void-icon-class	指定了未选中时的图标类名	string
disabled	设置组件只读
show-score	在只读的基础上显示分数	boolean	false
score-template	显示分数的模板	string
max	设置最大的分值	number
allow-half	是否允许半选	boolean	false

6.13、Form 表单

​ 在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker。

Form表单的属性：

属性名	解释	属性值类型	默认值
inline	表单变成行类表单	boolean	false
label-position	设置表单域标签的位置	string（right/left/top）	right
label-width	设置表单域标签的宽度，需要带单位	string
hide-required-asterisk	是否隐藏必填字段的标签旁边的红色星号	boolean	false
show-message	是否显示校验错误信息	boolean	true
inline-message	是否以行内形式展示校验信息	boolean	false
status-icon	是否在输入框中显示校验结果反馈图标	boolean	false
validate-on-rule-change	是否在 rules 属性改变后立即触发一次验证	boolean	true
size	组件的尺寸	string（medium / small / mini）

表单校验：

• 创建一个校验规则对象

data(){
    return{
        formValue:{
            username: "",
            password: "",
        },
        // 表单校验规则对象
        formRule:{
            // 每一个校验的对象，与表单中每项绑定的值一一对应
            // 可以有多个校验规则，所以是个数组，数组中存放校验对象
            // required必填，message:校验失败后的提示文字；trigger：触发方式，blur表示失去焦点时触发
            username: [{required: true, message: '输入的登录账号不能为空', trigger: 'blur'}],
            password: [{required: true, message: '输入的登录账号不能为空', trigger: 'blur'}]
        }
    }
},

• 表单中注入规则

在表单中通过rules属性，将创建的表单校验规则对象注入进去。

• 在每一表单项上，通过prop属性指定校验规则，指定的是校验规则对象中的属性。

• 全局校验：当点击提交按钮是通过点击事件来进行表单的校验。

submitAction(){
// 获取表单，然后通过validate方法进行校验，它有一个回调函数，回调参数就是校验的结果，如果通过校验就返回true，否则返回false
    this.$refs['form'].validate((result)=>{
        if (result){
            alert("通过校验");
        }else {
            alert("校验失败");
        }
    });
}

自定义校验规则：

• 在data中创建一个函数对象。

data(){
    // 自定义的一个校验函数
    // rule可忽略，value需要校验的值，callback回调函数
    let checkPassword = (rule,value,callback)=>{
        if (value.trim()=== ""){
            // 如果不校验通过可以通过new Error对象，将提示文字通过参数传入
            callback(new Error("输入登录密码不能为空"));
        }else {
            // 如果callback的参数为空就表示校验通过
            callback();
        }
    };
},

• 使用自定义的校验规则

formRule:{
    // 每一个校验的对象，与表单中每项绑定的值一一对应
    // 可以有多个校验规则，所以是个数组，数组中存放校验对象
    // required必填，message:校验失败后的提示文字；trigger：触发方式，blur表示失去焦点时触发
    username: [{required: true, message: '输入的登录账号不能为空', trigger: 'blur'}],
    password: [{validator:checkPassword, trigger: 'blur'}]
}

通过使用校验对象的validator属性，属性值为自定义的校验函数。

表单的方法：

方法名	解释	参数
validate	对表单进行校验，参数是一个回调函数	Function(callback: Function(boolean, object))
resetFields	对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
clearValidate	移除表单项的校验结果

7、表格

​ 当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽。

el-table的属性：

属性名	解释	属性值类型	默认值
data	绑定的表格的数据	object数组对象
stripe	是否带有斑马线效果	boolean	false
border	表格是否带有边框	boolean	false
height	指定表格的高度，当超过这个高度就出现滚动条，但是表头固定	string
max-height	指定表格的最大高度，超过这个高度出现滚动条	string
fit	列的宽度是否自撑开	boolean	false
highlight-current-row	是否要高亮当前行	boolean	false

el-table-column的属性：

属性名	解释	属性值类型	默认值
fixed	固定列，当宽度不够，改列固定，其他列出现滚动条	boolean或者left（固定在左边）、right（固定在右边）	false
sortable	实现以该列为基准的排序	boolean	false

表格序号：

​ 如果需要显示索引，可以增加一列el-table-column，设置type属性为index即可显示从 1 开始的索引号。

选择框：

​ 设type属性为selection即可。

自定义表头：

​ 通过设置 Scoped slo 来自定义表头。

表格的事件：

事件名	解释	参数
select(selection,row)	当用户手动勾选数据行的 Checkbox 时触发的事件	第一个参数是已经被选中数据，第二个参数是对应行对象其中包含数据，
select-all(selection)	当用户手动勾选全选 Checkbox 时触发的事件	已经被选中的行对象对应的数据
selection-change(selection)	当选择项发生变化时会触发该事件	已经被选中的行对象对应的数据
cell-mouse-enter(row, column, cell, event)	当单元格 hover 进入时会触发该事件	行中的数据对象、列对象、单元格对象这个Dom对象、事件对象
cell-mouse-leave(row, column, cell, event)	当单元格 hover 退出时会触发该事件	行中的数据对象、列对象、单元格对象这个Dom对象、事件对象
row-click(row, column, event)	当某一行被点击时会触发该事件

8、Tag标签

​ 使用 el-tag定义一个标签。

标签二

属性：

属性名	解释	属性值类型	默认值
type	指定标签的类型	string（success/info/warning/danger）
color	指定背景颜色	string
closable	设置是否可以关闭标签	boolean	false
hit	是否有边框描边	boolean	false
effect	设置主题	string（dark / light / plain）	light

事件：

事件名	解释	参数
click	点击时的事件
close	设置可关闭后的关闭事件

9、Tree 树形控件

​ 使用el-tree创建一个树形控件。

属性：

属性名	解释	属性值类型	默认值
data	展示的数据	array
empty-text	内容为空的时候展示的文本	string
node-key	每个树节点用来作为唯一标识的属性，整棵树应该是唯一的	String

事件：

事件名称	说明	回调参数
node-click	节点被点击时的回调	共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。
node-contextmenu	当某一节点被鼠标右键点击时会触发该事件	共四个参数，依次为：event、传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。
check-change	节点选中状态发生变化时的回调	共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点
check	当复选框被点击的时候触发	共两个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性
current-change	当前选中节点变化时触发的事件	共两个参数，依次为：当前节点的数据，当前节点的 Node 对象
node-expand	节点被展开时触发的事件	共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身
node-collapse	节点被关闭时触发的事件	共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身
node-drag-start	节点开始拖拽时触发的事件	共两个参数，依次为：被拖拽节点对应的 Node、event
node-drag-enter	拖拽进入其他节点时触发的事件	共三个参数，依次为：被拖拽节点对应的 Node、所进入节点对应的 Node、event
node-drag-leave	拖拽离开某个节点时触发的事件	共三个参数，依次为：被拖拽节点对应的 Node、所离开节点对应的 Node、event
node-drag-over	在拖拽节点时触发的事件（类似浏览器的 mouseover 事件）	共三个参数，依次为：被拖拽节点对应的 Node、当前进入节点对应的 Node、event
node-drag-end	拖拽结束时（可能未成功）触发的事件	共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点（可能为空）、被拖拽节点的放置位置（before、after、inner）、event
node-drop	拖拽成功完成时触发的事件	共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点、被拖拽节点的放置位置（before、after、inner）、event

10、分页

​ 使用 el-pagination来创建一个分页组件。

​ 设置layout，表示需要显示的内容，用逗号分隔，布局元素会依次显示。prev表示上一页，next为下一页，pager表示页码列表，除此以外还提供了jumper和total，size和特殊的布局符号->，->后的元素会靠右显示，jumper表示跳页元素，total表示总条目数，size用于设置每页显示的页码数量。一般吧llayout设置为 layout="sizes,prev, pager, next,jumper,->,total"

属性：

属性名	解释	类型	默认值
total	总共的条数	number
layout	设置分页的样式	string
page-size	每页显示的条数	number	10
pager-count	页码按钮的数量，当总页数超过该值时会折叠	number（大于等于 5 且小于等于 21 的奇数）	7
current-page	当前页	number	1
popper-class	每页显示个数选择器的下拉框类名	string
prev-text	替代图标显示的上一页文字	string
next-text	替代图标显示的下一页文字	string
page-sizes	每页显示个数选择器的选项设置	number[]	[10, 20, 30, 40, 50, 100]
background	是否设置背景颜色	boolean	false

事件：

事件名称	说明	回调参数
size-change	page-size 改变时会触发	每页条数
current-change	current-page 改变时会触发	当前页
prev-click	用户点击上一页按钮改变当前页后触发	当前页
next-click	用户点击下一页按钮改变当前页后触发	当前页

11、标记

​ 使用 el-badge 标签创建一个标记。

    评论

属性：

属性名	解释	类型	默认值
value	显示的标记的值	string、number
type	修改标记的类型	string（primary / success / warning / danger / info）
max	当标记的数大于max，会出现+标记，只能在value为number使用	number
is-dot	标记一个红点，用于提示用户，value和它之间只能指定一个	boolean	false
hidden	隐藏 badge	boolean	false

12、Avatar头像

​ 使用一个 el-avatar来创建一个头像标签。

属性：

属性名	解释	类型	默认值
src	图片的路径	string
shape	图片的呈现方式是圆还是方块	string（circle / square）	circle
size	指定头像的大小	number、string（ large / medium / small）	large
icon	设置头像图标	string
alt	图像的代替文本	string
fit	当展示类型为图片的时候，设置图片如何适应容器框	string（fill / contain / cover / none / scale-down）	cover

13、alert 警告

​ 使用 el-alert 创建一个警告标签。

属性：

属性名	解释	类型	默认值
title	提示的文字信息	string
type	指定提示的类型	string（success/warning/info/error）	info
effect	指定提示的主题	string（light/dark）	light
closable	设置提示是否可以被关闭	boolean	true
close-text	设置关闭按钮的文字	string
show-icon	显示 Alert 的 icon	boolean	false
center	设置文本居中	boolean	false
description	设置辅助性文字。辅助性文字只能存放单行文本，会自动换行显示。	string

14、message 提示消息

​ 在js代码中通过 this.$message('这是一条消息提示');提示一条消息。

clickAction(){
    this.$message("这是一条提示消息");
}

消息框除了可以传入一个字符串作为提示消息，也可以传入一个对象来配置这个消息。

this.$message({
    message: "这是一条提示消息!",  // 消息的正文
    type: "success",   // 消息的类型 success/warning/info/error，默认是info
    showClose: true,   // 设置消息可否手动关闭，不设置手动关闭，默认3秒后自动关闭，默认不能关闭
    duration: 1000,     // 设置自动关闭的时间，单位是毫秒
    center: true,        // 设置提示文字是否居中
    // iconClass: "el-icon-delete-solid" 自定义图标的类名，会覆盖 type
    offset: 500,        // 设置消息图窗口顶部的偏移量，默认是20
    onClose: (message)=>{       // 当消息提示关闭的回调函数，参数是message这个实例
        console.log(message);
        alert("消息被关闭"+message);
    }
});

15、message提示框

​ 调用$alert方法即可打开消息提示，它模拟了系统的 alert，无法通过按下 ESC 或点击框外关闭。此例中接收了两个参数，message和title。值得一提的是，窗口被关闭后，它默认会返回一个Promise对象便于进行后续操作的处理。若不确定浏览器是否支持Promise，可自行引入第三方 polyfill 或像本例一样使用回调进行后续处理。

// 参数一：消息的正文
// 参数二：消息的标题
// 参数三：一个对象，用于配置消息框
this.$alert("消息提示","提示",{
    confirmButtonText: "确定"
});

​ 调用$confirm方法即可打开消息提示，它模拟了系统的 confirm。Message Box 组件也拥有极高的定制性，我们可以传入options作为第三个参数，它是一个字面量对象。type字段表明消息类型，可以为success，error，info和warning，无效的设置将会被忽略。注意，第二个参数title必须定义为String类型，如果是Object，会被理解为options。在这里我们用了 Promise 来处理后续响应。

this.$confirm("确定进行操作吗?","提示",{
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "success",
    center: true  // 提示居中显示
}).then(()=>{
    // 点击确定后进行的操作
    this.$message({
        message: "确定操作!",
        type: "success",
        offset: 300,
        center: true
    });
}).catch(()=>{
    // 点击取消进行的操作
    this.$message({
        message: "不操作!",
        type: "error",
        offset: 300,
        center: true
    });
});

​ 调用$prompt方法即可打开消息提示，它模拟了系统的 prompt。可以用inputPattern字段自己规定匹配模式，或者用inputValidator规定校验函数，可以返回Boolean或String，返回false或字符串时均表示校验未通过，同时返回的字符串相当于定义了inputErrorMessage字段。此外，可以用inputPlaceholder字段来定义输入框的占位符。

this.$prompt("请输入您的邮箱","提示",{
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    // 输入的校验规则，是一个正则表达式对象
    // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
    // 也可以通过inputValidator自定义一个校验规则，参数是输入值，返回true就是校验成功，如果返回字符串就是校验不成功，并且返回的字符串会覆盖inputErrorMessage
    inputValidator: (value)=>{
        let regExp = /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/;
        return regExp.test(value);
    },
    // 校验失败的提示文字
    inputErrorMessage: "邮箱的格式不正确!",
    // 占位符
    inputPlaceholder: "请输入邮箱!"
}).then((({value})=>{
    // 当点击确定并输入正确后的操作
    this.$message({
        message: "输入的邮箱为:"+value,
        type: "success",
        offset: 300,
        center: true
    });
})).catch(()=>{
    // 点击取消的操作
    this.$message({
        message: "取消输入!",
        type: "success",
        offset: 300,
        center: true
    });
})

提示框的配置内容：

参数	解释	类型	默认值
callback	若不使用 Promise，可以使用此参数指定 MessageBox 关闭后的回调	function(action, instance)，action 的值为’confirm’, ‘cancel’或’close’, instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法
beforeClose	MessageBox 关闭前的回调，会暂停实例的关闭	function(action, instance, done)，action 的值为’confirm’, ‘cancel’或’close’；instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法；done 用于关闭 MessageBox 实例
lockScroll	是否在 MessageBox 出现时将 body 滚动锁定	boolean	true
closeOnClickModal	是否可通过点击遮罩关闭 MessageBox	boolean	true（以 alert 方式调用时为 false）
closeOnPressEscape	是否可通过按下 ESC 键关闭 MessageBox	boolean	true（以 alert 方式调用时为 false）
inputType	输入框的类型	string	text

16、Notification 通知

this.$notify({
    title: "标题",
    message: "这是一条通知",
    duration: 1000, // 通知默认可以自动关闭，默认时间为4500就关闭，如果设置duration为0就不会自动关闭
    type: "success",  // 指定通知的类型
    position: "top-left", // 指定通知弹出的位置，top-right、top-left、bottom-right、bottom-left，默认为top-right
    // 可以使弹出的消息距屏幕边缘偏移一段距离。注意在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量，根据第一个指定的位置偏移
    // 例如top-left就是一top进行偏移
    offset: 300,
    showClose: false, // 设置是否隐藏关闭按钮
})

17、NavMenu 导航菜单

​ 使用el-menu创建一个导航菜单。

点击我

    展开
    折叠


    菜单一
    
    
        
        菜单二-1
        菜单二-2
        菜单二-3
        
            
            菜单二-4-1
            菜单二-4-2
            菜单二-4-3
        
    
    
        
        菜单三-1
        菜单三-2
        菜单三-3
    

18、tabs 标签页

​ 使用 el-tabs创建一个标签页。

19、Breadcrumb 面包屑

​ 使用 el-breadcrumb，可以创建一个面包屑导航栏。

20、PageHeader 页头

​ 使用 el-page-header 标签创建一个页头。

21、Dropdown 下拉菜单

​ 使用 el-dropdown创建一个下拉菜单。

  
    下拉菜单
  
    
    
        黄金糕
        双皮奶
        蚵仔煎
    




    下拉菜单
    
        黄金糕
        双皮奶
        蚵仔煎
    

22、Steps 步骤条

​ 设置active属性，接受一个Number，表明步骤的 index，从 0 开始。需要定宽的步骤条时，设置space属性即可，它接受Number，单位为px，如果不设置，则为自适应。设置finish-status属性可以改变已经完成的步骤的状态。

下一步

    
    
    

23、Dialog 对话框

​ 需要设置visible属性，它接收Boolean，当为true时显示 Dialog。Dialog 分为两个部分：body和footer，footer需要具名为footer的slot。title属性用于定义标题，它是可选的，默认值为空。最后，本例还展示了before-close的用法。

在Dialog对话框中可以嵌套自己需要的内容，例如表单，用于修改和登录等，表格用来呈现数据。如果需要在一个 Dialog 内部嵌套另一个 Dialog，需要使用 append-to-body 属性。

        
        
            这是一段信息
            
            确 定
            取 消
          
        

24、Tooltip 文字提示

​ 使用content属性来决定hover时的提示信息。由placement属性决定展示效果：placement属性值为：方向-对齐位置；四个方向：top、left、right、bottom；三种对齐位置：start, end，默认为空。如placement="left-end"，则提示信息出现在目标元素的左侧，且提示信息的底部与目标元素的底部对齐。

    按钮

25、走马灯

​ 结合使用el-carousel和el-carousel-item标签就得到了一个走马灯。幻灯片的内容是任意的，需要放在el-carousel-item标签中。默认情况下，在鼠标 hover 底部的指示器时就会触发切换。通过设置trigger属性为click，可以达到点击触发的效果。

    
        
{{ item }}