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属性的值有primary，success，warning，info，text，danger。
  2. 使用type的plain（朴素按钮）、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-checkbox 的 label属性是该 checkbox 对应的值，若该标签中无内容，则该属性也充当 checkbox 按钮后的介绍。

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

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

    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-icon 和 suffix-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属性，不设置min和max时，最小值为 0。
  3. 允许定义递增递减的步数控制，设置step属性可以控制步长，接受一个Number。
  4. 设置 precision 属性可以控制数值精度，接收一个 Number。precision 的值必须是一个非负整数，并且不能小于 step 的小数位数。
  5. 额外提供了 medium、small、mini 三种尺寸的数字输入框。
  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

远程搜索

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

为了启用远程搜索，需要将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
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属性对象的start、end和step指定可选的起始时间、结束时间和步长。

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 属性来设置文件列表的样式，可选值有：text，picture，picture-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-threshold 和 high-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 值或者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
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-spinner和element-loading-background属性分别用来设定图标类名和背景色值。

25、NavMenu导航菜单

  1. 导航菜单默认为垂直模式，通过mode属性可以使导航菜单变更为水平模式。另外，在菜单中通过submenu组件可以生成二级菜单。Menu 还提供了background-color、text-color和active-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来设置下拉触发的元素以及需要通过具名slot为dropdown 来设置下拉菜单。默认情况下，下拉按钮只要hover即可，无需点击也会显示下拉菜单。
  2. 设置split-button属性来让触发下拉元素呈现为按钮组，左边是功能按钮，右边是触发下拉菜单的按钮，设置为true即可。
  3. 额外的尺寸：medium、small、mini，通过设置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 分为两个部分：body和footer，footer需要具名为footer的slot。title属性用于定义标题，它是可选的，默认值为空。

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属性值为：方向-对齐位置；四个方向：top、left、right、bottom；三种对齐位置：start, end，默认为空。如placement="left-end"，则提示信息出现在目标元素的左侧，且提示信息的底部与目标元素的底部对齐。

  3. Tooltip 组件提供了两个不同的主题：dark和light。通过设置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，支持四种触发方式：hover，click，focus 和 manual。对于触发 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 组件包括header和body部分，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-carousel和el-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文档

赏

谢谢你请我吃糖果

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

很惭愧<br><br>只做了一点微小的工作<br>谢谢大家