Loading 加载

加载数据时显示动效。

区域加载

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

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 
23 <style>
24   body {
25     margin: 0;
26   }
27 </style>
28 
29 <script>
30   export default {
31     data() {
32       return {
33         tableData: [{
34           date: '2016-05-03',
35           name: '王小虎',
36           address: '上海市普陀区金沙江路 1518 弄'
37         }, {
38           date: '2016-05-02',
39           name: '王小虎',
40           address: '上海市普陀区金沙江路 1518 弄'
41         }, {
42           date: '2016-05-04',
43           name: '王小虎',
44           address: '上海市普陀区金沙江路 1518 弄'
45         }],
46         loading: true
47       };
48     }
49   };
50 </script>
View Code

 

自定义

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

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

 1 <template>
 2   <el-table
 3     v-loading="loading2"
 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 
26 <script>
27   export default {
28     data() {
29       return {
30         tableData: [{
31           date: '2016-05-03',
32           name: '王小虎',
33           address: '上海市普陀区金沙江路 1518 弄'
34         }, {
35           date: '2016-05-02',
36           name: '王小虎',
37           address: '上海市普陀区金沙江路 1518 弄'
38         }, {
39           date: '2016-05-04',
40           name: '王小虎',
41           address: '上海市普陀区金沙江路 1518 弄'
42         }],
43         loading2: true
44       };
45     }
46   };
47 </script>
View Code

 

整页加载

页面数据加载时显示。

当使用指令方式时，全屏遮罩需要添加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="openFullScreen2">
11     服务方式
12   </el-button>
13 </template>
14 
15 <script>
16   export default {
17     data() {
18       return {
19         fullscreenLoading: false
20       }
21     },
22     methods: {
23       openFullScreen() {
24         this.fullscreenLoading = true;
25         setTimeout(() => {
26           this.fullscreenLoading = false;
27         }, 2000);
28       },
29       openFullScreen2() {
30         const loading = this.$loading({
31           lock: true,
32           text: 'Loading',
33           spinner: 'el-icon-loading',
34           background: 'rgba(0, 0, 0, 0.7)'
35         });
36         setTimeout(() => {
37           loading.close();
38         }, 2000);
39       }
40     }
41   }
42 </script>
View Code

 

服务

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

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

参数说明类型可选值默认值
target Loading 需要覆盖的 DOM 节点。可传入一个 DOM 对象或字符串；若传入字符串，则会将其作为参数传入 document.querySelector以获取到对应 DOM 节点 object/string — document.body
body 同 v-loading 指令中的 body 修饰符 boolean — false
fullscreen 同 v-loading 指令中的 fullscreen 修饰符 boolean — true
lock 同 v-loading 指令中的 lock 修饰符 boolean — false
text 显示在加载图标下方的加载文案 string — —
spinner 自定义加载图标类名 string — —
background 遮罩背景色 string — —
customClass Loading 的自定义类名 string — —
posted @ 2018-03-14 06:58  大姐姐小姐姐  阅读(14317)  评论(0)  编辑  收藏  举报