• Loading 加载
    • 区域加载
    • 自定义
    • 整页加载
    • 服务
    • Options

    Loading 加载

    加载数据时显示动效。

    区域加载

    在表格等容器中加载数据时显示。

    Loading 加载 - 图1

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

    1. <template>
    2. <el-table
    3. v-loading="loading"
    4. :data="tableData"
    5. style="width: 100%">
    6. <el-table-column
    7. prop="date"
    8. label="日期"
    9. width="180">
    10. </el-table-column>
    11. <el-table-column
    12. prop="name"
    13. label="姓名"
    14. width="180">
    15. </el-table-column>
    16. <el-table-column
    17. prop="address"
    18. label="地址">
    19. </el-table-column>
    20. </el-table>
    21. </template>
    22. <style>
    23. body {
    24. margin: 0;
    25. }
    26. </style>
    27. <script>
    28. export default {
    29. data() {
    30. return {
    31. tableData: [{
    32. date: '2016-05-03',
    33. name: '王小虎',
    34. address: '上海市普陀区金沙江路 1518 弄'
    35. }, {
    36. date: '2016-05-02',
    37. name: '王小虎',
    38. address: '上海市普陀区金沙江路 1518 弄'
    39. }, {
    40. date: '2016-05-04',
    41. name: '王小虎',
    42. address: '上海市普陀区金沙江路 1518 弄'
    43. }],
    44. loading: true
    45. };
    46. }
    47. };
    48. </script>

    自定义

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

    Loading 加载 - 图2

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

    1. <template>
    2. <el-table
    3. v-loading="loading"
    4. element-loading-text="拼命加载中"
    5. element-loading-spinner="el-icon-loading"
    6. element-loading-background="rgba(0, 0, 0, 0.8)"
    7. :data="tableData"
    8. style="width: 100%">
    9. <el-table-column
    10. prop="date"
    11. label="日期"
    12. width="180">
    13. </el-table-column>
    14. <el-table-column
    15. prop="name"
    16. label="姓名"
    17. width="180">
    18. </el-table-column>
    19. <el-table-column
    20. prop="address"
    21. label="地址">
    22. </el-table-column>
    23. </el-table>
    24. </template>
    25. <script>
    26. export default {
    27. data() {
    28. return {
    29. tableData: [{
    30. date: '2016-05-03',
    31. name: '王小虎',
    32. address: '上海市普陀区金沙江路 1518 弄'
    33. }, {
    34. date: '2016-05-02',
    35. name: '王小虎',
    36. address: '上海市普陀区金沙江路 1518 弄'
    37. }, {
    38. date: '2016-05-04',
    39. name: '王小虎',
    40. address: '上海市普陀区金沙江路 1518 弄'
    41. }],
    42. loading: true
    43. };
    44. }
    45. };
    46. </script>

    整页加载

    页面数据加载时显示。

    Loading 加载 - 图3

    当使用指令方式时,全屏遮罩需要添加fullscreen修饰符(遮罩会插入至 body 上),此时若需要锁定屏幕的滚动,可以使用lock修饰符;当使用服务方式时,遮罩默认即为全屏,无需额外设置。

    1. <template>
    2. <el-button
    3. type="primary"
    4. @click="openFullScreen"
    5. v-loading.fullscreen.lock="fullscreenLoading">
    6. 指令方式
    7. </el-button>
    8. <el-button
    9. type="primary"
    10. @click="openFullScreen">
    11. 服务方式
    12. </el-button>
    13. </template>
    14. <script>
    15. export default {
    16. data() {
    17. return {
    18. fullscreenLoading: false
    19. }
    20. },
    21. methods: {
    22. openFullScreen() {
    23. this.fullscreenLoading = true;
    24. setTimeout(() => {
    25. this.fullscreenLoading = false;
    26. }, 2000);
    27. },
    28. openFullScreen() {
    29. const loading = this.$loading({
    30. lock: true,
    31. text: 'Loading',
    32. spinner: 'el-icon-loading',
    33. background: 'rgba(0, 0, 0, 0.7)'
    34. });
    35. setTimeout(() => {
    36. loading.close();
    37. }, 2000);
    38. }
    39. }
    40. }
    41. </script>

    服务

    Loading 还可以以服务的方式调用。引入 Loading 服务:

    1. import { Loading } from 'element-ui';

    在需要调用时:

    Loading.service(options);
    

    其中 options 参数为 Loading 的配置项,具体见下表。LoadingService 会返回一个 Loading 实例,可通过调用该实例的 close 方法来关闭它:

    let loadingInstance = Loading.service(options);
    this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
      loadingInstance.close();
    });
    

    需要注意的是,以服务的方式调用的全屏 Loading 是单例的:若在前一个全屏 Loading 关闭前再次调用全屏 Loading,并不会创建一个新的 Loading 实例,而是返回现有全屏 Loading 的实例:

    let loadingInstance1 = Loading.service({ fullscreen: true });
    let loadingInstance2 = Loading.service({ fullscreen: true });
    console.log(loadingInstance1 === loadingInstance2); // true
    

    此时调用它们中任意一个的 close 方法都能关闭这个全屏 Loading。

    如果完整引入了 Element,那么 Vue.prototype 上会有一个全局方法 $loading,它的调用方式为:this.$loading(options),同样会返回一个 Loading 实例。

    Options

    参数说明类型可选值默认值
    targetLoading 需要覆盖的 DOM 节点。可传入一个 DOM 对象或字符串;若传入字符串,则会将其作为参数传入 document.querySelector以获取到对应 DOM 节点object/stringdocument.body
    bodyv-loading 指令中的 body 修饰符booleanfalse
    fullscreenv-loading 指令中的 fullscreen 修饰符booleantrue
    lockv-loading 指令中的 lock 修饰符booleanfalse
    text显示在加载图标下方的加载文案string
    spinner自定义加载图标类名string
    background遮罩背景色string
    customClassLoading 的自定义类名string