Element UI三十三Loading加载

简介

• 在Element中，并没有提供组件用于加载，而是通过指令或服务的方法调用Loading。指令指的是v-loading，它需要绑定一个Boolean。默认情况下，Loading遮罩会插入到绑定元素的子节点，若添加body修饰符则可以使遮罩插入DOM中的body上。

        <el-table v-loading="loading" :data="tableData" style="width: 100%;">
            <el-table-column prop="date" label="日期" width="180"></el-table-column>
            <el-table-column prop="name" label="姓名" width="180"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
        </el-table>

自定义

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

整页加载

• 当使用指令方式时，通过fullscreen修饰符可将遮罩插入至body上，此时若需要锁定屏幕的滚动，可追加lock修饰符（v-loading.fullscreen.lock）。当使用服务方式时，遮罩默认即为全屏，无需额外设置。下例点击按钮后将开启整页遮罩式加载，并在2s后结束加载：
• 

服务

• Loading还可以通过服务的方式调用。

全局方法

• 如果项目已完整引入了Element，那么Vue.prototype（Vue实例）上会有一个全局方法$loading，其调用方式为this.$loading(options)，返回一个Loading实例。

单独引用

• 如果未完整引入Element，那么可以单独引入Loading：

//首先引入Loading服务
import {Loading} from 'element-ui';
//在需要调用时：
Loading.service(options);

• 其中，options参数为Loading的配置项，取值如下表，

• 

• Loading.service方法会返回一个Loading实例，通过调用该实例的close方法可关闭它：

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

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

let loadingInstance1 = Loading.service({ fullscreen: true });
//在第一个Loading实例没关的情况下又申请了一个实例
let loadingInstance2 = Loading.service({ fullscreen: true });
console.log(loadingInstance1 === loadingInstance2); // true

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

• 官方文档

• 代码实例：“E:\sublime text 3\Sublime Text 3\itemname2\element-starter”