Vue-Element UI

注意事项总结

1、链接点击

默认的<a>标签中的链接包含下划线,颜色为蓝色,vue中的<router-link>标签在编译时会被解析为<a>标签,所以想要改变它们的初始状态、鼠标聚焦时的状态、点击链接时的状态以及点击之后的状态,可以在样式中添加如下代码:

1
2
3
4
5
6
<style>
a:link {text-docoration: none; color: black}
a:visited {text-docoration: none; color: grey}
a:hover {text-docoration: none; color: red}
a:active {text-docoration: none; color: blue}
</style>

注意:

  1. a:hover 必须在a:link和 a:visited后出现,才能正常显示效果!
  2. a:active必须出现在a:hover定义后才能有效果!

2、Container容器

  1. <el-container>:外层容器。当子元素中包含 <el-header><el-footer> 时,全部子元素会垂直上下排列,否则会水平左右排列。
  2. <el-header>:顶栏容器。
  3. <el-aside>:侧边栏容器。
  4. <el-main>:主要区域容器。
  5. <el-footer>:底栏容器。

container容器可以嵌套使用。

3、Button按钮

  1. <el-button>type属性的值有primarysuccesswarninginfotextdanger
  2. 使用typeplain(朴素按钮)、round(圆角按钮)和circle(圆形按钮)属性来定义 Button 的样式。
  3. autofocus属性用来决定是否默认聚焦。
  4. native-type属性值可选为button / submit / reset,来使用原生 type 属性。
  5. loading属性为true时, 按钮显示正在加载状态中。

4、Radio单选框

1
2
3
4
5
6
<el-radio-group v-model="radio3">
<el-radio-button label="上海"></el-radio-button>
<el-radio-button label="北京"></el-radio-button>
<el-radio-button label="广州"></el-radio-button>
<el-radio-button label="深圳"></el-radio-button>
</el-radio-group>

v-model绑定的是lable中的值。

  1. <el-radio-button>用于按钮形式的单选框。
  2. 设置border属性可以渲染为带有边框的单选框,且size属性只有border为真时有效果。

5、Icon图标

直接通过设置类名为 el-icon-iconName 来使用即可。通常把图标包裹在<i>标签中:

1
2
3
<i class="el-icon-edit"></i>
<i class="el-icon-share"></i>
<i class="el-icon-delete"></i>

JaWFDe.png

JaWZ4I.png

图标可以与按钮结合,形成图标按钮:

1
2
3
4
5
6
7
8
9
10
<el-button-group>
<el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
<el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
</el-button-group>

<el-button-group>
<el-button type="primary" icon="el-icon-edit"></el-button>
<el-button type="primary" icon="el-icon-share"></el-button>
<el-button type="primary" icon="el-icon-delete"></el-button>
</el-button-group>

JahGpq.png

6、Checkbox多选框

单选框组
  1. 单独使用可以表示两种状态之间的切换,写在标签中的内容为 checkbox 按钮后的介绍。
  2. el-checkbox元素中定义v-model绑定变量,单一的checkbox中,默认绑定变量的值会是Boolean,选中为true
多选框组
  1. checkbox-group元素能把多个 checkbox 管理为一组,只需要在 Group 中使用v-model绑定Array类型的变量即可。

  2. el-checkboxlabel属性是该 checkbox 对应的值,若该标签中无内容,则该属性也充当 checkbox 按钮后的介绍。

  3. label与数组中的元素值相对应,如果存在指定的值则为选中状态,否则为不选中。

  4. 使用 minmax 属性能够限制可以被勾选的项目的数量。

    1
    <el-checkbox-gruop :min='1' :max='3'></el-checkbox-gruop>
  5. el-checkbox元素替换为el-checkbox-button元素即为按钮样式。此外,Element 还提供了size属性。

  6. 设置border属性可以渲染为带有边框的多选框。

7、Input输入框

带icon的输入框

可以通过 prefix-iconsuffix-icon 属性在 input 组件首部和尾部增加显示图标,也可以通过 slot 来放置图标。

1、属性方式:

1
2
3
4
5
6
7
8
9
10
<el-input
placeholder="请选择日期"
suffix-icon="el-icon-date"
v-model="input2">
</el-input>
<el-input
placeholder="请输入内容"
prefix-icon="el-icon-search"
v-model="input21">
</el-input>

2、slot方式:

1
2
3
4
5
6
7
8
9
10
<el-input
placeholder="请选择日期"
v-model="input2">
<i slot="suffix" class="el-input__icon el-icon-date"></i>
</el-input>
<el-input
placeholder="请输入内容"
v-model="input21">
<i slot="suffix" class="el-input__icon el-icon-search"></i>
</el-input>
文本域
  1. 用于输入多行文本信息,通过将 type 属性的值指定为 textarea

  2. 文本域高度可通过 rows 属性控制。如::rows="2"

  3. 通过设置 autosize 属性可以使得文本域的高度能够根据文本内容自动进行调整,并且 autosize 还可以设定为一个对象,指定最小行数和最大行数。

    1
    2
    3
    <el-input type="textarea" autosize></el-input>

    <el-input type="textarea" autosize="{ minRows: 2, maxRows: 4}"></el-input>
  4. 可通过 size 属性指定输入框的尺寸,除了默认的大小外,还提供了 medium、small 和 mini 三种尺寸。

带输入建议

根据输入内容提供对应的输入建议。

autocomplete 是一个可带输入建议的输入框组件fetch-suggestions 是一个返回输入建议的方法属性,如 querySearch(queryString, cb),在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。

1
2
3
4
<el-autocomplete
v-model="state1"
:fetch-suggestions="querySearch">
</el-autocomplete>

此时,只要鼠标聚焦即可出现建议,要想输入之后再返回匹配的建议,可以添加如下代码:

1
2
3
4
5
<el-autocomplete
v-model="state1"
:fetch-suggestions="querySearch">
:trigger-on-focus="false"
</el-autocomplete>

注意:fetch-suggestions属性中的方法只能返回一个数组,该数组中可以包含多个字典。该属性能够自动识别'value'键,且只将'value'键对应的值返回到输入框组中。若返回数组中的字典中没有键名为'vakue'的键,则返回到输入框的数组为空。

自定义模板

由于默认的带建议输入框只能返回键为'input'的值,有一定的局限性,所以我们可以自定义模板,仅仅自己定义返回建议的那个模板。使用scoped slot自定义输入建议的模板。该 scope 的参数为item,表示当前输入建议对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<el-autocomplete
popper-class="my-autocomplete"
v-model="state3"
:fetch-suggestions="querySearch"
placeholder="请输入内容">
<i
class="el-icon-edit el-input__icon"
slot="suffix">
</i>
<template slot-scope="{ item }">
<div class="name">{{ item.value }}</div>
<span class="addr">{{ item.address }}</span>
</template>
</el-autocomplete>

<style>
.name {
text-overflow: ellipsis;
overflow: hidden;
}
.addr {
font-size: 12px;
color: #b4b4b4;
}
</style>

此处的<template>也可以换为<div>,只要有属性scoped slot= "{ item }"即可。自己定义的部分就是<template>标签包含的部分。

拓展:

1、text-overflow属性规定当文本溢出包含元素时发生的事情,可选值有:

描述
clip 修剪文本。
ellipsis 显示省略符号来代表被修剪的文本。
string 使用给定的字符串来代表被修剪的文本。

2、overflow属性规定当内容溢出元素框时发生的事情:

描述
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

这两种属性通常连用。

8、InputNumber计数器

  1. 仅允许输入标准的数字值,可定义范围。只需要在el-input-number元素中使用v-model绑定变量即可,变量的初始值即为默认值。
  2. 可以设置min属性和max属性,不设置minmax时,最小值为 0。
  3. 允许定义递增递减的步数控制,设置step属性可以控制步长,接受一个Number
  4. 设置 precision 属性可以控制数值精度,接收一个 Numberprecision 的值必须是一个非负整数,并且不能小于 step 的小数位数。
  5. 额外提供了 mediumsmallmini 三种尺寸的数字输入框。
  6. 设置 controls-position 属性可以控制按钮位置,可选值为right

9、Select选择器

v-model的值为当前被选中的el-option的 value 属性值。

多选

el-select设置multiple属性即可启用多选,此时v-model的值为当前选中值所组成的数组。默认情况下选中值会以 Tag 的形式展现,你也可以设置collapse-tags属性将它们合并为一段文字。

1
2
3
4
5
6
7
8
9
10
11
12
 <el-select
v-model="value11"
multiple
collapse-tags
placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>

效果如下:

JB2Wlt.png

自定义模板

将自定义的 HTML 模板插入el-option的 slot 中即可。

例如:

1
2
3
4
5
6
7
8
9
10
<el-select v-model="value6" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
<span style="float: left">{{ item.label }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
</el-option>
</el-select>

效果如下:

JBfHte.png

分组

使用el-option-group对备选项进行分组,它的label属性为分组名。

1
2
3
4
5
6
7
8
9
10
11
12
13
<el-select v-model="value7" placeholder="请选择">
<el-option-group
v-for="group in options3"
:key="group.label"
:label="group.label">
<el-option
v-for="item in group.options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-option-group>
</el-select>

效果如下:

JBIRUK.png

可搜索

el-select添加filterable属性即可启用搜索功能。默认情况下,Select 会找出所有label属性包含输入值的选项。如果希望使用其他的搜索逻辑,可以通过传入一个filter-method来实现。filter-method为一个Function,它会在输入值发生变化时调用,参数为当前输入值。

1
2
3
4
5
6
7
8
<el-select v-model="value8" filterable placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>

效果如下:

JBTbh8.png

远程搜索

从服务器搜索数据,输入关键字进行查找。

为了启用远程搜索,需要将filterableremote设置为true,同时传入一个remote-methodremote-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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<el-switch
v-model="s1"
active-color="#13ce66"
inactive-color="#ff4949"
active-text="按月付费"
inactive-text="按年付费">
</el-switch>

<el-switch
style="margin-left: 20px"
v-model="s2"
active-color="#13ce66"
inactive-color="#ff4949"
active-text="按月付费"
inactive-text="按年付费">
</el-switch>

效果如下:

JDEYAx.png

11、Silder滑块

在拖动滑块时,显示当前值.

  • 默认
  • 自定义初始值
  • 隐藏 Tooltip(提示信息)::show-tooltip="false"
  • 格式化 Tooltip(提示信息)::format-tooltip="function()"
  • 禁用
  • 设置show-input属性会在右侧显示一个输入框
  • 设置range即可开启范围选择,此时绑定值是一个数组,其元素分别为最小边界值和最大边界值
  • 设置vertical可使 Slider 变成竖向模式,此时必须设置高度height属性

12、TimePicker时间选择器

固定时间点

使用<el-time-select>标签,通过设置picker-options属性对象的startendstep指定可选的起始时间、结束时间和步长。

1
2
3
4
5
6
7
8
9
<el-time-select
v-model="value1"
:picker-options="{
start: '08:30',
step: '00:15',
end: '18:30'
}"
placeholder="选择时间">
</el-time-select>
任意时间点

使用 el-time-picker 标签,通过selectableRange限制可选时间范围。提供了两种交互方式:默认情况下通过鼠标滚轮进行选择,打开arrow-control属性则通过界面上的箭头进行选择。

1
2
3
4
5
6
7
<el-time-picker
v-model="value2"
:picker-options="{
selectableRange: '18:30:00 - 20:30:00'
}"
placeholder="任意时间点">
</el-time-picker>
任意时间范围

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

1
2
3
4
5
6
7
8
<el-time-picker
is-range
v-model="value4"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
placeholder="选择时间范围">
</el-time-picker>

13、DataPicker日期选择器

基本单位由type属性指定:

  • year:选择年
  • month:选择月
  • date:选择日
  • dates:选择多个日期
  • week:选择周
  • datetime:选择具体时间
  • datetimerange:选择具体的时间范围
  • daterange:选择日期范围
设置快捷选项

快捷选项需配置picker-options对象中的shortcuts。禁用日期通过 disabledDate 设置,传入函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<el-date-picker
v-model="value2"
align="right"
type="date"
placeholder="选择日期"
:picker-options="pickerOptions1">
</el-date-picker>

<script>
export default {
data() {
return {
pickerOptions1: {
disabledDate(time) {
return time.getTime() > Date.now();
},
shortcuts: [{
text: '今天',
onClick(picker) {
picker.$emit('pick', new Date());
}
}, {
text: '昨天',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
picker.$emit('pick', date);
}
}, {
text: '一周前',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', date);
}
}]
},
value1: '',
value2: '',
};
}
};
</script>

效果如下:

JD3lvt.png

选择日期范围

在选择日期范围时,默认情况下左右面板会联动。如果希望两个面板各自独立切换当前月份,可以使用unlink-panels属性解除联动。

1
2
3
4
5
6
7
<el-date-picker
v-model="value6"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
日期格式

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

默认情况下,组件接受并返回Date对象。

1
2
3
4
5
6
<el-date-picker
v-model="value10"
type="date"
placeholder="选择日期"
format="yyyy 年 MM 月 dd 日">
</el-date-picker>

14、DateTimePicker日期时间选择器

DateTimePicker 由 DatePicker 和 TimePicker 派生,Picker Options 或者其他选项可以参照 DatePicker 和 TimePicker。

设置type属性为:

  1. datetime
  2. datetimerange

15、Upload上传

用户头像上传

使用 before-upload 限制用户上传的图片格式和大小。

代码示例:

1
2
3
4
5
6
7
8
9
<el-upload
class="avatar-uploader"
action="https://jsonplaceholder.typicode.com/posts/"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

这里我们要重写第三方组件,但是不能直接重写,否则没有效果,解决方法如下:

  1. 重写第三方组件之后去掉<style scoped>中的scoped,但是这样会造成组件之间的样式污染。

  2. 去掉<style scoped>中的scoped之后,将本页面中所有样式包裹在一个class里面,避免污染其他页面。

  3. 使用/deep/穿透(推荐使用)。

deep穿透

vue引用了第三方组件,需要在组件中局部修改第三方组件的样式,而又不想去除scoped属性造成组件之间的样式污染。此时只能通过>>>,穿透scoped

有些Sass 之类的预处理器无法正确解析 >>>。可以使用 /deep/ 操作符( >>> 的别名)。

用法如下:

1
2
3
4
5
6
7
8
9
<style scoped>

/deep/ 第三方组件 {

样式

}

</style>

修改第三方组件

  1. 打开vue页面,点击右键检查;
  2. 选中想要修改的组件,查看其样式,并将所有有关该组件的样式都复制粘贴到<style>中;
  3. 修改其中的属性值;
  4. 使用/deep/穿透。

用户头像上传需重写第三方组件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<style>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
照片墙

使用 list-type 属性来设置文件列表的样式,可选值有:textpicturepicture-card

1
2
3
4
5
6
7
8
9
10
<el-upload
action="https://jsonplaceholder.typicode.com/posts/"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>

<el-dialog>是弹出框标签,用于渲染查看已上传成功的图片时的样式。

拖拽上传

<el-load>标签中加入drag属性即可。可重写drag组件。

16、Rate评分

<el-rate>

  1. 评分被分为三个等级,可以利用颜色对分数及情感倾向进行分级(默认情况下不区分颜色)。三个等级所对应的颜色用过:colors属性设置,而它们对应的两个阈值则通过 low-thresholdhigh-threshold 设定。
  2. 为组件设置 show-text 属性会在右侧显示辅助文字。通过设置 texts 可以为每一个分值指定对应的辅助文字。texts 为一个数组,长度应等于最大值 max
  3. 评分的图标可以自己定义(默认为五角星),通过属性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
2
3
4
5
6
7
8
9
10
11
12
13
14
<el-table
:data="tableData2"
style="width: 100%"
:row-class-name="tableRowClass">
</el-table>

tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
}
固定表头

纵向内容过多时,可选择固定表头。

只要在el-table元素中定义了height(100%)属性,即可实现固定表头的表格,而不需要额外的代码。

固定列

横向内容过多时,可选择固定列。

固定列需要使用fixed属性,它接受 Boolean 值或者leftright,表示左边固定还是右边固定。

多级表头

只需要在 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表示页码列表,除此以外还提供了jumpertotalsize和特殊的布局符号->->后的元素会靠右显示,jumper表示跳页元素,total表示显示页码总数,size用于设置每页显示的页码数量。

默认情况下,当总页数超过 7 页时,Pagination 会折叠多余的页码按钮。通过pager-count属性可以设置最大页码按钮数。

设置background属性可以为分页按钮添加背景色。

在空间有限的情况下,可以使用简单的小型分页,只需要一个small属性,它接受一个Boolean,默认为false,设为true即可启用。

1
2
3
4
5
<el-pagination
background
layout="prev, pager, next"
:total="1000">
</el-pagination>

22、Badge标记

出现在按钮、图标旁的数字或状态标记。

定义value属性,它接受Number或者String

1
2
3
<el-badge :value="12">
<el-button size="small">评论</el-button>
</el-badge>
小红点

除了数字外,设置is-dot属性,它接受一个Boolean

1
<el-badge is-dot>数据查询</el-badge>

23、Alert警告

1
2
3
4
5
6
7
<el-alert
title="成功提示的文案"
type="success"
description="文字说明文字说明文字说明文字说明文字说明文字说明"
center
show-icon>
</el-alert>

24、Loading加载

Element 提供了两种调用 Loading 的方法:指令和服务。对于自定义指令v-loading,只需要绑定Boolean即可。默认状况下,Loading 遮罩会插入到绑定元素的子节点,通过添加body修饰符,可以使遮罩插入至 DOM 中的 body 上。

自定义

可自定义加载文案、图标和背景色。

在绑定了v-loading指令的元素上添加element-loading-text属性,其值会被渲染为加载文案,并显示在加载图标的下方。类似地,element-loading-spinnerelement-loading-background属性分别用来设定图标类名和背景色值。

25、NavMenu导航菜单

  1. 导航菜单默认为垂直模式,通过mode属性可以使导航菜单变更为水平模式。另外,在菜单中通过submenu组件可以生成二级菜单。Menu 还提供了background-colortext-coloractive-text-color,分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。
  2. 垂直菜单,可内嵌子菜单。通过el-menu-item-group组件可以实现菜单进行分组,分组名可以通过title属性直接设定,也可以通过具名 slot 来设定。

26、Tags标签页

  1. 分隔内容上有关联但属于不同类别的数据集合。
  2. Tabs 组件提供了选项卡功能,默认选中第一个标签页,你也可以通过 value 属性来指定当前选中的标签页。
  3. 只需要设置 type 属性为 card 就可以使选项卡改变为标签风格。
  4. type设置为border-card就可以变为卡片化的标签页。
  5. 可以通过 tab-position 设置标签的位置(tabPosition="left|right|top|bottom"
  6. 可以通过具名 slot 来实现自定义标签页的内容
1
2
3
4
5
6
7
8
9
<el-tabs type="border-card" v-model="nameList">
<el-tab-pane name="first">
<span slot="label"><i class="el-icon-date"></i> 我的行程</span>
我的行程
</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>

注意:v-model绑定的值是name中的值。

27、Breadcrumb面包屑

用于页面右上方一行导航栏。

el-breadcrumb中使用el-breadcrumb-item标签表示从首页开始的每一级。Element 提供了一个separator属性,在el-breadcrumb标签中设置它来决定分隔符,它只能是字符串,默认为斜杠/,也可以用图标表示,比如添加属性separator-class

1
2
3
4
5
6
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> //用于vue项目页面切换
<el-breadcrumb-item><a href="/">活动管理</el-breadcrumb-item>
<el-breadcrumb-item>活动列表</el-breadcrumb-item>
<el-breadcrumb-item>活动详情</el-breadcrumb-item>
</el-breadcrumb>

28、Dropdown下拉菜单

  1. 通过组件slot来设置下拉触发的元素以及需要通过具名slotdropdown 来设置下拉菜单。默认情况下,下拉按钮只要hover即可,无需点击也会显示下拉菜单。
  2. 设置split-button属性来让触发下拉元素呈现为按钮组,左边是功能按钮,右边是触发下拉菜单的按钮,设置为true即可。
  3. 额外的尺寸:mediumsmallmini,通过设置size属性来配置它们。
1
2
3
4
5
6
7
8
9
10
11
12
<el-dropdown>
<span>
下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>黄金糕</el-dropdown-item>
<el-dropdown-item>狮子头</el-dropdown-item>
<el-dropdown-item>螺蛳粉</el-dropdown-item>
<el-dropdown-item disabled>双皮奶</el-dropdown-item>
<el-dropdown-item divided>蚵仔煎</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>

29、Steps步骤条

  1. 设置active属性,接受一个Number,表明步骤的 index,从 0 开始。需要定宽的步骤条时,设置space属性即可,它接受Boolean,单位为px,如果不设置,则为自适应。设置finish-status属性可以改变已经完成的步骤的状态。
  2. 可以对步骤条进行描述: description=""
  3. 通过icon属性来设置图标。
  4. 竖向步骤条:只需要在el-steps元素中设置direction属性为vertical即可。
1
2
3
4
5
6
7
8
9
10
<el-steps :active="active" finish-status="success">
<el-step title="步骤 1"></el-step>
<el-step title="步骤 2"></el-step>
<el-step title="步骤 3"></el-step>
</el-steps>
<el-button style="margin-top: 12px;" @click="next">下一步</el-button>

next() {
if (this.active++ > 2) this.active = 0;
}

30、Dialog对话框

在保留当前页面状态的情况下,告知用户并承载相关操作。

需要设置visible属性,它接收Boolean,当为true时显示 Dialog。Dialog 分为两个部分:bodyfooterfooter需要具名为footerslottitle属性用于定义标题,它是可选的,默认值为空。

before-close 仅当用户通过点击关闭图标或遮罩关闭 Dialog 时起效。如果你在 footer 具名 slot 里添加了用于关闭 Dialog 的按钮,那么可以在按钮的点击回调函数里加入 before-close 的相关逻辑。

1
2
3
4
5
6
7
8
9
10
11
12
13
<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>

<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>

31、Tooltip文字提示

  1. 常用于展示鼠标 hover 时的提示信息。

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

  3. Tooltip 组件提供了两个不同的主题:darklight。通过设置effect属性来改变主题,默认为dark

  4. 展示多行文本或者是设置文本内容的格式,用具名 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,支持四种触发方式:hoverclickfocusmanual。对于触发 Popover 的元素,有两种写法:使用 slot="reference" 的具名插槽,或使用自定义指令v-popover指向 Popover 的索引ref。(通常用第一种)

1
2
3
4
5
6
7
8
9
<template>
<el-popover
placement="top-start"
title="标题"
width="200"
trigger="hover"
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
<el-button slot="reference">hover 激活</el-button>
</el-popover>
嵌套操作

还可以嵌套操作,这相比 Dialog 更为轻量:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<el-popover
placement="top"
width="160"
v-model="visible2">
<p>这是一段内容这是一段内容确定删除吗?</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="visible2 = false">取消</el-button>
<el-button type="primary" size="mini" @click="visible2 = false">确定</el-button>
</div>
<el-button slot="reference">删除</el-button>
</el-popover>

<script>
export default {
data() {
return {
visible2: false,
};
}
}
</script>

33、Card卡片

将信息聚合在卡片容器中展示。

Card 组件包括headerbody部分,header部分需要有显式具名 slot 分发,同时也是可选的。

1
2
3
4
5
6
7
8
9
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>卡片名称</span>
<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
</div>
<div v-for="o in 4" :key="o" class="text item">
{{'列表内容 ' + o }}
</div>
</el-card>

34、Carousel走马灯(轮播)

在有限空间内,循环播放同一类型的图片、文字等内容。

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

1
2
3
4
5
<el-carousel height="150px">
<el-carousel-item v-for="item in 4" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
卡片

当页面宽度方向空间空余,但高度方向空间匮乏时,可使用卡片风格

type属性设置为card即可启用卡片模式。从交互上来说,卡片模式和一般模式的最大区别在于,可以通过直接点击两侧的幻灯片进行切换。

1
2
3
4
5
<el-carousel :interval="4000" type="card" height="200px">
<el-carousel-item v-for="item in 6" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>

修改原组件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.el-carousel__item h3 {
color: #475669;
font-size: 14px;
opacity: 0.75;
line-height: 200px;
margin: 0;
}

.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}

35、Collapse折叠面板

除了可以通过 title 属性以外,还可以通过具名 slot 来实现自定义面板的标题内容,以实现增加图标等效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
<el-collapse accordion>
<el-collapse-item>
<template slot="title">
一致性 Consistency<i class="header-icon el-icon-info"></i>
</template>
<div>与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;</div>
<div>在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。</div>
</el-collapse-item>
<el-collapse-item title="反馈 Feedback">
<div>控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作;</div>
<div>页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。</div>
</el-collapse-item>
</el-collapse>

查看Element-UI文档