Element UI三十三Loading加载_haienenen的博客-程序员宅基地

技术标签： vue

简介

在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实例）上会有一个全局方法 $l o a d i n g ，其调用方式为 t h i s .$ 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”

本文链接：https://blog.csdn.net/jiachunchun/article/details/110275981

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

加密与授权 Oauth2.0_oauth2 client secret_塞北沐秋的博客-程序员宅基地

加密算法对称加密加密和解密使用同样规则（简称"密钥"），这被称为"对称加密算法"非对称加密授权机制OAuthOAuth2.0授权码（authorization-code隐藏式（implicit）密码式（password）客户端凭证（client credentials）..._oauth2 client secret

为MyEclipse 8.5添加Google App Engine插件-程序员宅基地

Google App Engine(GAE)提供了一个很好的Python和Java语言支持平台，可以让程序员们很容易的在Google的集群服务器上部署自己开发的各种网络应用程序。最近下载了最新的MyEclipse8.5，而且想做个Java小程序部署到GAE上，但是GAE提供的都是Eclip...

Android Studio3.2 连接手机后界面布局查看方法_android studio获取当前屏幕布局-程序员宅基地

1.工具栏Tools2.弹出界面3.界面布局_android studio获取当前屏幕布局

C语言实现Linux下删除非空目录_c语言删除非空目录-程序员宅基地

#include <sys/stat.h>#include <dirent.h>#include <fcntl.h>/*** 递归删除目录(删除该目录以及该目录包含的文件和目录)* @dir:要删除的目录绝对路径*/int remove_dir(const char *dir){ char cur_dir[] = "."; char up_dir[] = ".."; char dir_name[128]; DIR *dir_c语言删除非空目录

Cadence技巧04：OrCAD原理图的off-page加页面号-程序员宅基地

点击打开链接

Android Material Design中的BottomNavigationView实现底部导航栏-程序员宅基地

还记得我们在此之前是如何实现底部导航栏功能的吗？在BottomNavigationView没出来之前，也有几套比较成熟或者大家使用比较多的方案：第一种使用LinearLayout + TextView实现了底部导航栏的效果。第二种使用RadioGroup + RadioButton实现了底部导航栏的效果。这两种方法也都能实现底部导航栏的效果，但是用过的人应该都清楚，实现过程太过繁琐，而BottomNavigationView却可以让你用最少的代码实现最动人的效果。

随便推点

XmlPullParser.getEventType()_andriod xmlpullparser.geteventtype()一直等于4-程序员宅基地

XmlPullParser.getEventType()方法的返回类型_andriod xmlpullparser.geteventtype()一直等于4

iptables基础知识详解-程序员宅基地

为什么80%的码农都做不了架构师？>>> ...

数组、列向量和行向量区别_行向量组和列向量组的区别-程序员宅基地

Numpy库学习——向量表示在机器学习和深度学习的编程过程中，为了提高程序的运行速度，通常将模型表达式转换为向量表达式（向量化），即利用矩阵运算思想提高运行效率。那么，在Python中究竟如何利用Numpy库定义一个向量，以及如何判断否为向量呢？（一）Python中向量的特征通常情况下，Python中向量和数组之间界限比较模糊，很多时候是通用的..._行向量组和列向量组的区别

Activiti学习（4）简单的请假流程_activiti 请假流程图-程序员宅基地

在前一篇文章的基础上，编写一个稍微复杂的请假流程，进一步熟悉Activiti的基本知识，并期望能够触类旁通，解决上一篇博文中没有解决的问题。实现过程中，参考了以下文章，在此向作者表示感谢。1、activiti快速入门--简单请假例子（1）2、Activiti 6.0 工作流入门之HelloWorld3、Activiti工作流框架——快速上手4、Maven 生命周期另外，程序猿..._activiti 请假流程图

dlib和opencv编程——人脸识别数据集的建立_c++ dlib 人脸特征数据如何存储-程序员宅基地

一、存储人脸特征图像存储20张人脸特征图像代码：import cv2import dlibimport osimport sysimport random# 存储位置output_dir = 'E:/AI1/Face/631907090130'size = 64 if not os.path.exists(output_dir): os.makedirs(output_dir)# 改变图片的亮度与对比度 def relight(img, light=1, bias=0_c++ dlib 人脸特征数据如何存储

图像处理之opencv---mat、cvmat、IplImage之间的转换-程序员宅基地

一、Mat类型：矩阵类型，Matrix。在openCV中，Mat是一个多维的密集数据数组。可以用来处理向量和矩阵、图像、直方图等等常见的多维数据。Mat有3个重要的方法：1、Mat mat = imread(const String* filename); 读取图像2、imshow(const string frameName, InputArray mat); 显示图像3、...