loading 加载

他有几个参数
作用:加载数据时显示动效。

参数	说明
target	Loading 需要覆盖的 DOM 节点。可传入一个 DOM 对象或字符串；若传入字符串，则会将其作为参数传入 document.querySelector以获取到对应 DOM 节点
lock	同 v-loading 指令中的 lock 修饰符
text	显示在加载图标下方的加载文案
spinner	自定义加载图标类名
background	遮罩背景色
customClass	Loading 的自定义类名
body	同 v-loading 指令中的 body 修饰符

例子:

  this.$nextTick(()=>{loading=this.$loading({target:'.filter-menus-box',lock:true,text:'loading',spinner:'el-icon-loading',background:'rgba(0,0,0,0.7)'})})

区域加载
在表格等容器中加载数据时显示。
Element 提供了两种调用 Loading 的方法：指令和服务。对于自定义指令v-loading，只需要绑定Boolean即可。默认状况下，Loading 遮罩会插入到绑定元素的子节点，通过添加body修饰符，可以使遮罩插入至 DOM 中的 body 上。

 <template>2   <el-table3     v-loading="loading"4     :data="tableData"5     style="width: 100%">6     <el-table-column7       prop="date"8       label="日期"9       width="100">
10     </el-table-column>
11     <el-table-column
12       prop="name"
13       label="姓名"
14       width="100">
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: '2021-05-03',
35           name: '张明',
36           address: '北京市延庆区'
37         }, {38           date: '2021-05-03',
39           name: '张明',
40           address: '北京市延庆区'
41         }
],
46         loading: true
47       };
48     }
49   };
50 </script>

整页加载
页面数据加载时显示。
当使用指令方式时，全屏遮罩需要添加fullscreen修饰符（遮罩会插入至 body 上）,想要要锁定屏幕的滚动，可以使用lock修饰符；当使用服务方式时，遮罩默认即为全屏，不需要重新设置。

<template>2   <el-button3     type="primary"4     @click="openFullScreen"5     v-loading.fullscreen.lock="fullscreenLoading">6     指令方式7   </el-button>8   <el-button9     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>

服务
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 加载相关推荐

2款不同样式的CSS3 Loading加载动画附源码
原文:2款不同样式的CSS3 Loading加载动画附源码我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...
loading加载和layer.js
layer.js中的loading加载 l本篇主要介绍layerjs中的loading加载在实际项目中的应用 1.使用的技术前端:HTML5+CSS3+JS+layer.js 后端:.net 2. ...
axios请求拦截做Loading加载
axios请求拦截做Loading加载首先安装element-ui ,我们是按需引入从element-ui 引入我们所需: import {Loading,Message} from " ...
html5 css3炫酷效果,28种纯CSS3炫酷loading加载动画特效
这是一组效果非常炫酷的纯CSS3 Loading加载动画特效.这组loading动画共有27种不同的效果.每一种loading动画都是通过CSS3的keyframes帧动画来完成的,每一个加载动画都构 ...
html间隔代码_HTML+CSS基础入门开发，经典Loading加载缩放动画特效
大家好,本篇文章分享经典Loading加载缩放动画特效,欢迎参考和指正. 效果图: Loading加载缩放动画特效 HTML代码: CSS代码: 知识点: animation:是CSS3的动画属性,这 ...
axios vue 加载效果动画_vue+axios+element ui 实现全局loading加载示例
实现全局loading加载分析需求,我们只需要在请求发起的时候开始loading,响应结束的时候关闭loading,就这么简单对不对? import axios from 'axios'; imp ...
PhP加载时显示动画,在ajax请求完之前的loading加载的动画效果实现
这篇文章给大家介绍的内容是关于在ajax请求完之前的loading加载的动画效果实现,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 很多时候我们需要引入框架来开发项目,这时我们可能会 ...
自定义loading加载
我们可以利用动态图gif和js自定义loading加载第一步:  <img id="loading" src='img/ ...
html新建通用loading,漂亮实用的页面loading(加载)封装代码
要做一个异步登录,打算给用户做一点提示,所以就网上找了点代码,自己修改新增了一些,做了一个html+css+js的功能封装,以备未来直接使用. html 正在登陆 css /*缓冲提示条 start* ...
android 百分比loading,牛逼的loading加载效果
牛逼的loading加载效果介绍: AnimatedCircleLoadingView一个不错的loading加载效果,自定义AnimatedCircleLoadingView设置startDete ...

loading 加载

loading 加载

loading 加载相关推荐

最新文章

热门文章