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="openFullScreen1"
  5. v-loading.fullscreen.lock="fullscreenLoading">
  6. 指令方式
  7. </el-button>
  8. <el-button
  9. type="primary"
  10. @click="openFullScreen2">
  11. 服务方式
  12. </el-button>
  13. </template>
  14. <script>
  15. export default {
  16. data() {
  17. return {
  18. fullscreenLoading: false
  19. }
  20. },
  21. methods: {
  22. openFullScreen1() {
  23. this.fullscreenLoading = true;
  24. setTimeout(() => {
  25. this.fullscreenLoading = false;
  26. }, 2000);
  27. },
  28. openFullScreen2() {
  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';

在需要调用时:

  1. Loading.service(options);

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

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

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

  1. let loadingInstance1 = Loading.service({ fullscreen: true });
  2. let loadingInstance2 = Loading.service({ fullscreen: true });
  3. 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