官方地址

https://element.eleme.io/#/zh-CN/component/loading

区域加载

在表格等容器中加载数据时显示。
Element提供了两种调用Loading 的方法：

指令
服务

对于自定义指令v-loading，只需要绑定Boolean即可。
默认状况下，Loading遮罩会插入到绑定元素的子节点，通过添加body修饰符，可以使遮罩插入至 DOM 中的body 上。

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

<script>export default {data() {return {tableData: [{date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}],loading: true};}};
</script>

自定义

在绑定了v-loading指令的元素上添加

element-loading-text属性，其值会被渲染为加载文案，并显示在加载图标的下方
element-loading-spinner用来设定图标类名
element-loading-background用来设定背景色值。

<template><el-tablev-loading="loading"element-loading-text="拼命加载中"element-loading-spinner="el-icon-loading"element-loading-background="rgba(0, 0, 0, 0.8)":data="tableData"style="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table>
</template>

<script>export default {data() {return {tableData: [{date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}],loading: true};}};
</script>

整页加载

当使用指令方式时，

全屏遮罩需要添加fullscreen修饰符（遮罩会插入至 body 上），
锁定屏幕的滚动，可以使用lock修饰符；

当使用服务方式时，遮罩默认即为全屏，无需额外设置。

<template><el-buttontype="primary"@click="openFullScreen"v-loading.fullscreen.lock="fullscreenLoading">指令方式</el-button><el-buttontype="primary"@click="openFullScreenByService">服务方式</el-button>
</template>

<script>export default {data() {return {fullscreenLoading: false}},methods: {openFullScreen() {this.fullscreenLoading = true;setTimeout(() => {this.fullscreenLoading = false;}, 2000);},openFullScreenByService() {const loading = this.$loading({lock: true,text: 'Loading',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)'});setTimeout(() => {loading.close();}, 2000);}}}
</script>

服务方式

全局引入

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

单独引入

引入
- import { Loading } from 'element-ui';
调用
- Loading.service(options);
- Loading.service 也会返回一个 Loading 实例，可通过调用该实例的 close 方法来关闭它

说明

以服务的方式调用的全屏 Loading 是单例的；
若在前一个全屏 Loading关闭前再次调用全屏Loading，并不会创建一个新的Loading实例，而是返回现有全屏 Loading 的实例，此时调用它们中任意一个的close方法都能关闭这个全屏Loading。：
```
let loadingInstance1 = Loading.service({ fullscreen: true });
let loadingInstance2 = Loading.service({ fullscreen: true });
console.log(loadingInstance1 === loadingInstance2); // true
```

以服务的方式调用的Loading 在调用close时需要异步关闭

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

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	—	—

ElementUI 加载Loding组件相关推荐

React Native封装Toast与加载Loading组件
React Native开发封装Toast与加载Loading组件在App开发中,我们避免不了使用的两个组件,一个Toast,一个网络加载Loading,在RN开发中,也是一样,React Nati ...
reactjs通过lazy函数配合import函数动态加载路由组件
路由组件的lazyLoad //1.通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包const Login = lazy(()=>i ...
react项目如何按需加载antdDesign组件
react项目如何按需加载antdDesign组件分为两种情况: 第一种手写的,不使用脚手架: 1.安装: npm install ant --save 2.引用: import { Alert, F ...
netcore实践：跨平台动态加载native组件
缘起netcore框架下实现基于zmq的应用.在.net framework时代,我们进行zmq开发由很多的选择,比较常用的有clrzmq4和NetMQ. 其中clrzmq是基于libzmq的Inte ...
import() 动态加载component组件失败
在写 vue+element 从后台获取数据写导航栏时,当我加载动态路由,import() 总是失败. 假设 path: "@/views/Home.vue",name: &qu ...
vue 根据组件地址动态加载异步组件
要求:根据列表中配置的组件地址,动态加载组件(webpart) vue 根据组件地址动态加载异步组件目录结构 index.html components/component1 components/ ...
qt widget加载qml_Qml组件小知识
介绍组件构造,销毁,动态加载小知识. 对象/组件都具有类似C++的构造函数和析构函数 onCompleted对象构造完成自动执行: onDestruction对象销毁前自动执行. QtObject { ...
react-native 自定义下拉刷新 / 上拉加载更多组件
1.封装 Scroller 组件 src/components/Scroller/index.js /*** 下拉刷新/上拉加载更多组件(Scroller)*/ import React, {Com ...
HTML小案例-使用CSS3实现网页加载loding动画
HTML小案例-使用CSS3实现网页加载loding动画话不多说先看效果 ** 以下为源代码 ** <!DOCTYPE html> <html lang="zh-CN&q ...

ElementUI 加载Loding组件

目录