Vue-Element UI
注意事项总结
1、链接点击
默认的<a>
标签中的链接包含下划线,颜色为蓝色,vue中的<router-link>
标签在编译时会被解析为<a>
标签,所以想要改变它们的初始状态、鼠标聚焦时的状态、点击链接时的状态以及点击之后的状态,可以在样式中添加如下代码:
1 | <style> |
注意:
- a:hover 必须在a:link和 a:visited后出现,才能正常显示效果!
- a:active必须出现在a:hover定义后才能有效果!
2、Container容器
<el-container>
:外层容器。当子元素中包含<el-header>
或<el-footer>
时,全部子元素会垂直上下排列,否则会水平左右排列。<el-header>
:顶栏容器。<el-aside>
:侧边栏容器。<el-main>
:主要区域容器。<el-footer>
:底栏容器。
container容器可以嵌套使用。
3、Button按钮
<el-button>
type属性的值有primary
,success
,warning
,info
,text
,danger
。- 使用
type
的plain
(朴素按钮)、round
(圆角按钮)和circle
(圆形按钮)属性来定义 Button 的样式。 autofocus
属性用来决定是否默认聚焦。native-type
属性值可选为button
/submit
/reset
,来使用原生 type 属性。loading
属性为true
时, 按钮显示正在加载状态中。
4、Radio单选框
1 | <el-radio-group v-model="radio3"> |
v-model绑定的是lable中的值。
<el-radio-button>
用于按钮形式的单选框。- 设置
border
属性可以渲染为带有边框的单选框,且size
属性只有border
为真时有效果。
5、Icon图标
直接通过设置类名为 el-icon-iconName
来使用即可。通常把图标包裹在<i>
标签中:
1 | <i class="el-icon-edit"></i> |
图标可以与按钮结合,形成图标按钮:
1 | <el-button-group> |
6、Checkbox多选框
单选框组
- 单独使用可以表示两种状态之间的切换,写在标签中的内容为 checkbox 按钮后的介绍。
- 在
el-checkbox
元素中定义v-model
绑定变量,单一的checkbox
中,默认绑定变量的值会是Boolean
,选中为true
。
多选框组
checkbox-group
元素能把多个 checkbox 管理为一组,只需要在 Group 中使用v-model
绑定Array
类型的变量即可。el-checkbox
的label
属性是该 checkbox 对应的值,若该标签中无内容,则该属性也充当 checkbox 按钮后的介绍。label
与数组中的元素值相对应,如果存在指定的值则为选中状态,否则为不选中。使用
min
和max
属性能够限制可以被勾选的项目的数量。1
<el-checkbox-gruop :min='1' :max='3'></el-checkbox-gruop>
把
el-checkbox
元素替换为el-checkbox-button
元素即为按钮样式。此外,Element 还提供了size
属性。设置
border
属性可以渲染为带有边框的多选框。
7、Input输入框
带icon的输入框
可以通过 prefix-icon
和 suffix-icon
属性在 input 组件首部和尾部增加显示图标,也可以通过 slot 来放置图标。
1、属性方式:
1 | <el-input |
2、slot方式:
1 | <el-input |
文本域
用于输入多行文本信息,通过将
type
属性的值指定为textarea
。文本域高度可通过
rows
属性控制。如::rows="2"
。通过设置
autosize
属性可以使得文本域的高度能够根据文本内容自动进行调整,并且autosize
还可以设定为一个对象,指定最小行数和最大行数。1
2
3<el-input type="textarea" autosize></el-input>
<el-input type="textarea" autosize="{ minRows: 2, maxRows: 4}"></el-input>可通过
size
属性指定输入框的尺寸,除了默认的大小外,还提供了 medium、small 和 mini 三种尺寸。
带输入建议
根据输入内容提供对应的输入建议。
autocomplete
是一个可带输入建议的输入框组件,fetch-suggestions
是一个返回输入建议的方法属性,如 querySearch(queryString, cb)
,在该方法中你可以在你的输入建议数据准备好时通过 cb(data)
返回到 autocomplete
组件中。
1 | <el-autocomplete |
此时,只要鼠标聚焦即可出现建议,要想输入之后再返回匹配的建议,可以添加如下代码:
1 | <el-autocomplete |
注意:
fetch-suggestions
属性中的方法只能返回一个数组,该数组中可以包含多个字典。该属性能够自动识别'value'
键,且只将'value'
键对应的值返回到输入框组中。若返回数组中的字典中没有键名为'vakue'
的键,则返回到输入框的数组为空。
自定义模板
由于默认的带建议输入框只能返回键为'input'
的值,有一定的局限性,所以我们可以自定义模板,仅仅自己定义返回建议的那个模板。使用scoped slot
自定义输入建议的模板。该 scope 的参数为item
,表示当前输入建议对象。
1 | <el-autocomplete |
此处的<template>
也可以换为<div>
,只要有属性scoped slot= "{ item }"
即可。自己定义的部分就是<template>
标签包含的部分。
拓展:
1、text-overflow
属性规定当文本溢出包含元素时发生的事情,可选值有:
值 | 描述 |
---|---|
clip | 修剪文本。 |
ellipsis | 显示省略符号来代表被修剪的文本。 |
string | 使用给定的字符串来代表被修剪的文本。 |
2、overflow
属性规定当内容溢出元素框时发生的事情:
值 | 描述 |
---|---|
visible | 默认值。内容不会被修剪,会呈现在元素框之外。 |
hidden | 内容会被修剪,并且其余内容是不可见的。 |
scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 |
auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 |
inherit | 规定应该从父元素继承 overflow 属性的值。 |
这两种属性通常连用。
8、InputNumber计数器
- 仅允许输入标准的数字值,可定义范围。只需要在
el-input-number
元素中使用v-model
绑定变量即可,变量的初始值即为默认值。 - 可以设置
min
属性和max
属性,不设置min
和max
时,最小值为 0。 - 允许定义递增递减的步数控制,设置
step
属性可以控制步长,接受一个Number
。 - 设置
precision
属性可以控制数值精度,接收一个Number
。precision
的值必须是一个非负整数,并且不能小于step
的小数位数。 - 额外提供了
medium
、small
、mini
三种尺寸的数字输入框。 - 设置
controls-position
属性可以控制按钮位置,可选值为right
。
9、Select选择器
v-model
的值为当前被选中的el-option
的 value 属性值。
多选
为el-select
设置multiple
属性即可启用多选,此时v-model
的值为当前选中值所组成的数组。默认情况下选中值会以 Tag 的形式展现,你也可以设置collapse-tags
属性将它们合并为一段文字。
1 | <el-select |
效果如下:
自定义模板
将自定义的 HTML 模板插入el-option
的 slot 中即可。
例如:
1 | <el-select v-model="value6" placeholder="请选择"> |
效果如下:
分组
使用el-option-group
对备选项进行分组,它的label
属性为分组名。
1 | <el-select v-model="value7" placeholder="请选择"> |
效果如下:
可搜索
为el-select
添加filterable
属性即可启用搜索功能。默认情况下,Select 会找出所有label
属性包含输入值的选项。如果希望使用其他的搜索逻辑,可以通过传入一个filter-method
来实现。filter-method
为一个Function
,它会在输入值发生变化时调用,参数为当前输入值。
1 | <el-select v-model="value8" filterable placeholder="请选择"> |
效果如下:
远程搜索
从服务器搜索数据,输入关键字进行查找。
为了启用远程搜索,需要将filterable
和remote
设置为true
,同时传入一个remote-method
。remote-method
为一个Function
,它会在输入值发生变化时调用,参数为当前输入值。需要注意的是,如果el-option
是通过v-for
指令渲染出来的,此时需要为el-option
添加key
属性,且其值需具有唯一性。
注意:如果 Select 的绑定值为对象类型,请务必指定 value-key
作为 value 唯一标识的键名。
10、Switch开关
基本用法
绑定v-model
到一个Boolean
类型的变量。可以使用active-color
属性与inactive-color
属性来设置开关的背景色。
文字描述
使用active-text
属性与inactive-text
属性来设置开关的文字描述。
1 | <el-switch |
效果如下:
11、Silder滑块
在拖动滑块时,显示当前值.
- 默认
- 自定义初始值
- 隐藏 Tooltip(提示信息):
:show-tooltip="false"
- 格式化 Tooltip(提示信息):
:format-tooltip="function()"
- 禁用
- 设置
show-input
属性会在右侧显示一个输入框 - 设置
range
即可开启范围选择,此时绑定值是一个数组,其元素分别为最小边界值和最大边界值 - 设置
vertical
可使 Slider 变成竖向模式,此时必须设置高度height
属性
12、TimePicker时间选择器
固定时间点
使用<el-time-select>
标签,通过设置picker-options属性对象的start
、end
和step
指定可选的起始时间、结束时间和步长。
1 | <el-time-select |
任意时间点
使用 el-time-picker
标签,通过selectableRange
限制可选时间范围。提供了两种交互方式:默认情况下通过鼠标滚轮进行选择,打开arrow-control
属性则通过界面上的箭头进行选择。
1 | <el-time-picker |
任意时间范围
添加is-range
属性即可选择时间范围,同样支持arrow-control
属性。
1 | <el-time-picker |
13、DataPicker日期选择器
基本单位由type
属性指定:
- year:选择年
- month:选择月
- date:选择日
- dates:选择多个日期
- week:选择周
- datetime:选择具体时间
- datetimerange:选择具体的时间范围
- daterange:选择日期范围
设置快捷选项
快捷选项需配置picker-options
对象中的shortcuts
。禁用日期通过 disabledDate
设置,传入函数。
1 | <el-date-picker |
效果如下:
选择日期范围
在选择日期范围时,默认情况下左右面板会联动。如果希望两个面板各自独立切换当前月份,可以使用unlink-panels
属性解除联动。
1 | <el-date-picker |
日期格式
使用format
指定输入框的格式;使用value-format
指定绑定值的格式。
默认情况下,组件接受并返回Date
对象。
1 | <el-date-picker |
14、DateTimePicker日期时间选择器
DateTimePicker 由 DatePicker 和 TimePicker 派生,Picker Options
或者其他选项可以参照 DatePicker 和 TimePicker。
设置type
属性为:
- datetime
- datetimerange
15、Upload上传
用户头像上传
使用 before-upload
限制用户上传的图片格式和大小。
代码示例:
1 | <el-upload |
这里我们要重写第三方组件,但是不能直接重写,否则没有效果,解决方法如下:
重写第三方组件之后去掉
<style scoped>
中的scoped
,但是这样会造成组件之间的样式污染。去掉
<style scoped>
中的scoped
之后,将本页面中所有样式包裹在一个class
里面,避免污染其他页面。使用
/deep/
穿透(推荐使用)。
deep穿透
vue引用了第三方组件,需要在组件中局部修改第三方组件的样式,而又不想去除scoped
属性造成组件之间的样式污染。此时只能通过>>>
,穿透scoped
。
有些Sass 之类的预处理器无法正确解析 >>>
。可以使用 /deep/
操作符( >>>
的别名)。
用法如下:
1 | <style scoped> |
修改第三方组件
- 打开vue页面,点击右键检查;
- 选中想要修改的组件,查看其样式,并将所有有关该组件的样式都复制粘贴到
<style>
中; - 修改其中的属性值;
- 使用
/deep/
穿透。
用户头像上传需重写第三方组件:
1 | <style> |
照片墙
使用 list-type
属性来设置文件列表的样式,可选值有:text
,picture
,picture-card
。
1 | <el-upload |
<el-dialog>
是弹出框标签,用于渲染查看已上传成功的图片时的样式。
拖拽上传
在<el-load>
标签中加入drag
属性即可。可重写drag
组件。
16、Rate评分
<el-rate>
- 评分被分为三个等级,可以利用颜色对分数及情感倾向进行分级(默认情况下不区分颜色)。三个等级所对应的颜色用过
:colors
属性设置,而它们对应的两个阈值则通过low-threshold
和high-threshold
设定。 - 为组件设置
show-text
属性会在右侧显示辅助文字。通过设置texts
可以为每一个分值指定对应的辅助文字。texts
为一个数组,长度应等于最大值max
。 - 评分的图标可以自己定义(默认为五角星),通过属性
icon-classes
可以传入三个不同的图标类名,使用void-icon-class
指定未选中时的图标类名。
17、ColorPicker颜色选择器
<el-color-picker>
使用 v-model 与 Vue 实例中的一个变量进行双向绑定,绑定的变量需要是字符串类型。
ColorPicker 支持普通颜色,也支持带 Alpha 通道的颜色,通过show-alpha
属性即可控制是否支持透明度的选择。
ColorPicker 支持预定义颜色,通过:predefine
传入一个颜色列表。
18、Table表格
当el-table
元素中注入data
对象数组后,在el-table-column
中用prop
属性来对应对象中的键名即可填入数据,用label
属性来定义表格的列名。可以使用width
属性来定义列宽。
带斑马纹表格
stripe
属性可以创建带斑马纹的表格。它接受一个Boolean
,默认为false
,设置为true
即为启用。
带边框表格
默认情况下,Table 组件是不具有竖直方向的边框的,如果需要,可以使用border
属性,它接受一个Boolean
,设置为true
即可启用。
带状态表格
可将表格内容 highlight 显示,方便区分「成功、信息、警告、危险」等内容。
可以通过指定 Table 组件的 row-class-name
属性来为 Table 中的某一行添加 class,表明该行处于某种状态。
1 | <el-table |
固定表头
纵向内容过多时,可选择固定表头。
只要在el-table
元素中定义了height
(100%)属性,即可实现固定表头的表格,而不需要额外的代码。
固定列
横向内容过多时,可选择固定列。
固定列需要使用fixed
属性,它接受 Boolean 值或者left
,right
,表示左边固定还是右边固定。
多级表头
只需要在 el-table-column
里面嵌套 el-table-column
,就可以实现多级表头。
19、Tag标签
<el-tag>
20、Progress进度条
线性进度条——百分比外显
Progress 组件设置percentage
属性即可,表示进度条对应的百分比,必填,必须在 0-100。
线性进度条——百分比内显
百分比不占用额外控件,适用于文件上传等场景。
Progress 组件可通过 stroke-width
属性更改进度条的高度,并可通过 text-inside
属性来将进度条描述置于进度条内部。
1 | <el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress> |
环形进度条
Progress 组件可通过 type
属性来指定使用环形进度条,在环形进度条中,还可以通过 width
属性来设置其大小。
1 | <el-progress type="circle" :percentage="100" status="success"></el-progress> |
21、Pagination分页
设置layout
,表示需要显示的内容,用逗号分隔,布局元素会依次显示。prev
表示上一页,next
为下一页,pager
表示页码列表,除此以外还提供了jumper
和total
,size
和特殊的布局符号->
,->
后的元素会靠右显示,jumper
表示跳页元素,total
表示显示页码总数,size
用于设置每页显示的页码数量。
默认情况下,当总页数超过 7 页时,Pagination 会折叠多余的页码按钮。通过pager-count
属性可以设置最大页码按钮数。
设置background
属性可以为分页按钮添加背景色。
在空间有限的情况下,可以使用简单的小型分页,只需要一个small
属性,它接受一个Boolean
,默认为false
,设为true
即可启用。
1 | <el-pagination |
22、Badge标记
出现在按钮、图标旁的数字或状态标记。
定义value
属性,它接受Number
或者String
。
1 | <el-badge :value="12"> |
小红点
除了数字外,设置is-dot
属性,它接受一个Boolean
。
1 | <el-badge is-dot>数据查询</el-badge> |
23、Alert警告
1 | <el-alert |
24、Loading加载
Element 提供了两种调用 Loading 的方法:指令和服务。对于自定义指令v-loading
,只需要绑定Boolean
即可。默认状况下,Loading 遮罩会插入到绑定元素的子节点,通过添加body
修饰符,可以使遮罩插入至 DOM 中的 body 上。
自定义
可自定义加载文案、图标和背景色。
在绑定了v-loading
指令的元素上添加element-loading-text
属性,其值会被渲染为加载文案,并显示在加载图标的下方。类似地,element-loading-spinner
和element-loading-background
属性分别用来设定图标类名和背景色值。
25、NavMenu导航菜单
- 导航菜单默认为垂直模式,通过
mode
属性可以使导航菜单变更为水平模式。另外,在菜单中通过submenu
组件可以生成二级菜单。Menu 还提供了background-color
、text-color
和active-text-color
,分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。 - 垂直菜单,可内嵌子菜单。通过
el-menu-item-group
组件可以实现菜单进行分组,分组名可以通过title
属性直接设定,也可以通过具名 slot 来设定。
26、Tags标签页
- 分隔内容上有关联但属于不同类别的数据集合。
- Tabs 组件提供了选项卡功能,默认选中第一个标签页,你也可以通过
value
属性来指定当前选中的标签页。 - 只需要设置
type
属性为card
就可以使选项卡改变为标签风格。 - 将
type
设置为border-card
就可以变为卡片化的标签页。 - 可以通过
tab-position
设置标签的位置(tabPosition="left|right|top|bottom"
) - 可以通过具名
slot
来实现自定义标签页的内容
1 | <el-tabs type="border-card" v-model="nameList"> |
注意:v-mode
l绑定的值是name
中的值。
27、Breadcrumb面包屑
用于页面右上方一行导航栏。
在el-breadcrumb
中使用el-breadcrumb-item
标签表示从首页开始的每一级。Element 提供了一个separator
属性,在el-breadcrumb
标签中设置它来决定分隔符,它只能是字符串,默认为斜杠/
,也可以用图标表示,比如添加属性separator-class
。
1 | <el-breadcrumb separator-class="el-icon-arrow-right"> |
28、Dropdown下拉菜单
- 通过组件
slot
来设置下拉触发的元素以及需要通过具名slot
为dropdown
来设置下拉菜单。默认情况下,下拉按钮只要hover
即可,无需点击也会显示下拉菜单。 - 设置
split-button
属性来让触发下拉元素呈现为按钮组,左边是功能按钮,右边是触发下拉菜单的按钮,设置为true
即可。 - 额外的尺寸:
medium
、small
、mini
,通过设置size
属性来配置它们。
1 | <el-dropdown> |
29、Steps步骤条
- 设置
active
属性,接受一个Number
,表明步骤的 index,从 0 开始。需要定宽的步骤条时,设置space
属性即可,它接受Boolean
,单位为px
,如果不设置,则为自适应。设置finish-status
属性可以改变已经完成的步骤的状态。 - 可以对步骤条进行描述:
description=""
。 - 通过
icon
属性来设置图标。 - 竖向步骤条:只需要在
el-steps
元素中设置direction
属性为vertical
即可。
1 | <el-steps :active="active" finish-status="success"> |
30、Dialog对话框
在保留当前页面状态的情况下,告知用户并承载相关操作。
需要设置visible
属性,它接收Boolean
,当为true
时显示 Dialog。Dialog 分为两个部分:body
和footer
,footer
需要具名为footer
的slot
。title
属性用于定义标题,它是可选的,默认值为空。
before-close
仅当用户通过点击关闭图标或遮罩关闭 Dialog 时起效。如果你在 footer
具名 slot 里添加了用于关闭 Dialog 的按钮,那么可以在按钮的点击回调函数里加入 before-close
的相关逻辑。
1 | <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button> |
31、Tooltip文字提示
常用于展示鼠标 hover 时的提示信息。
使用
content
属性来决定hover
时的提示信息。由placement
属性决定展示效果:placement
属性值为:方向-对齐位置
;四个方向:top
、left
、right
、bottom
;三种对齐位置:start
,end
,默认为空。如placement="left-end"
,则提示信息出现在目标元素的左侧,且提示信息的底部与目标元素的底部对齐。Tooltip 组件提供了两个不同的主题:
dark
和light
。通过设置effect
属性来改变主题,默认为dark
。展示多行文本或者是设置文本内容的格式,用具名 slot 分发
content
,替代tooltip
中的content
属性。1
2
3
4<el-tooltip placement="top" effect="dark">
<div slot="content">多行信息<br/>第二行信息</div>
<el-button>Top center</el-button>
</el-tooltip>
32、Popover弹出框
Popover 的属性与 Tooltip 很类似,它们都是基于Vue-popper
开发的,因此对于重复属性,请参考 Tooltip 的文档,在此文档中不做详尽解释。
trigger
属性用于设置何时触发 Popover,支持四种触发方式:hover
,click
,focus
和 manual
。对于触发 Popover 的元素,有两种写法:使用 slot="reference"
的具名插槽,或使用自定义指令v-popover
指向 Popover 的索引ref
。(通常用第一种)
1 | <template> |
嵌套操作
还可以嵌套操作,这相比 Dialog 更为轻量:
1 | <el-popover |
33、Card卡片
将信息聚合在卡片容器中展示。
Card 组件包括header
和body
部分,header
部分需要有显式具名 slot 分发,同时也是可选的。
1 | <el-card class="box-card"> |
34、Carousel走马灯(轮播)
在有限空间内,循环播放同一类型的图片、文字等内容。
结合使用el-carousel
和el-carousel-item
标签就得到了一个走马灯。幻灯片的内容是任意的,需要放在el-carousel-item
标签中。默认情况下,在鼠标 hover 底部的指示器时就会触发切换。通过设置trigger
属性为click
,可以达到点击触发的效果。
1 | <el-carousel height="150px"> |
卡片
当页面宽度方向空间空余,但高度方向空间匮乏时,可使用卡片风格
将type
属性设置为card
即可启用卡片模式。从交互上来说,卡片模式和一般模式的最大区别在于,可以通过直接点击两侧的幻灯片进行切换。
1 | <el-carousel :interval="4000" type="card" height="200px"> |
修改原组件:
1 | .el-carousel__item h3 { |
35、Collapse折叠面板
除了可以通过 title
属性以外,还可以通过具名 slot
来实现自定义面板的标题内容,以实现增加图标等效果。
1 | <el-collapse accordion> |