v-loading加载中

2024-04-22 19:05:06

一、整页加载

使用v-loading在接口为请求到数据之前，显示加载中，直到请求到数据后消失。

//全局loading
<template><div v-loading="loading"> </div>
</template>

在data 中定义初始化， loading: false，同时在mounted()中将 this.loading设置为true,再去请求接口

在接口的回调函数中，将 this.loading 设为false，到达效果。

当使用指令方式时，全屏遮罩需要添加fullscreen修饰符（遮罩会插入至 body 上），此时若需要锁定屏幕的滚动，可以使用lock修饰符；当使用服务方式时，遮罩默认即为全屏，无需额外设置。

指令方式：

<el-buttontype="primary"@click="openFullScreen1"v-loading.fullscreen.lock="fullscreenLoading">指令方式
</el-button>

服务方式：

openFullScreen2() {const loading = this.$loading({lock: true,text: 'Loading',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)'});setTimeout(() => {loading.close();}, 2000);
}

通常我们在 axios 拦截器中，使用服务指令来全局添加 loading 信息。

// 新增蒙层
var loading// request拦截器
$http.interceptors.request.use(config => {if (config.loading !== false) {  // 可配置不用蒙层，参考 src/api/base/goods.js 中 getPageQuery 方法。// 新增接口请求时蒙层loading = window.vm.$loading({lock: true,text: 'Loading',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)',})}return config
}, error => {// Do something with request errorconsole.log(error) // for debugPromise.reject(error)
})

二、局部加载

如果写在template下的顶层元素上的话，就不会触发全屏loading

//局部loading
<template><div> <section v-loading="loading"></section></div>
</template>

三、自定义

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

<el-mainv-loading="loading"element-loading-background="rgba(0, 0, 0, 0.5)"element-loading-text="图标正在加载中"
>......
</el-main>

更多详情，请查看：element-ui 之 loading 组件。

v-loading加载中相关推荐

微信小程序——焦点图可预览查看大图缩放（多张可左右滑动）带页码 loading 加载中 / https不显示图
微信小程序焦点图,可以滑动预览大图缩放微信小程序自带焦点图swiper ,但是没有页码,只有小圆点,所以要自己写 (在查看大图时遇到一个问题,安卓上查看大图部分图不显示,经排查,发现不显示的图片地址 ...
element中使用loading,加载中
前言: 在element中使用loadding的时候,在js中调用的,还是不太方便,这里把他封装下. 先写一个 loading.js 文件: import { Loading } from 'elem ...
微信小程序两种loading加载中显示方式
在微信开发中,为了用户更加友好的体验,一般在数据请求的时候就显示动态加载中的显示字样,表示数据正在加载,用户请耐心等待. 一般有两种显示方式(其实是三种,showToast和showLoading写法 ...
CSS3制作加载中loading动画效果
常见的loading加载中通常是使用一个gif来实现动画效果,实际上我们可以使用css3的特性来制作,本文介绍了一种线性加载效果的css3制作方法. 在web开发中经常遇到ajax的加载,那个加载中的 ...
vue项目中设置全局loading时遇到多个请求时loading加载显示问题
问题详细描述项目设置全局loading动画加载,如果页面一次加载了多个请求 ,当其中有一个接口请求成功后 loading加载动画会消失,但是其实此时还有一个接口还未请求成功那么其实加载动画不应 ...
点击提交按钮，按钮变灰，页面正在加载中
<div class="loading">加载中<img src="img/1.gif" alt=""></d ...
activity中fragment 返回键不退出_优雅地处理加载中(loading)，重试(retry)和无数据(empty)等...
LoadSir是一个高效易用,低碳环保,扩展性良好的加载反馈页管理框架,在加载网络或其他数据时候,根据需求切换状态页面,可添加自定义状态页面,如加载中,加载失败,无数据,网络超时,占位图,登录失效等常 ...
ajax的loading方法,Ajax加载中显示loading的方法
使用ajaxStart方法定义一个全局的"加载中..."提示$(function(){ $("#loading").ajaxStart(function(){ ...
10个CSS和jQuery的加载中（loading）动画效果实现
以往web开发中都使用Gif来实现加载中的效果,但是随着技术的发展我们也可以使用jQuery和CSS来实现加载中的效果,希望大家喜欢! 相关文章: 5个在线Ajax"加载中"旋转图 ...
css3加载中loading代码js特效大全
下载地址 css3加载中loading代码特效大全,非常多的预加载动画特效代码. dd:

最新文章

热门文章