vue+elementUI+axios实现的全局loading加载动画
在项目中,很多时候都需要loading加载动画来缓解用户的焦虑等待,比如说,我打开了一个页面,而这个页面有很多接口请求,但浏览器的请求并发数就那么几个,再加上如果网速不行的话,那么这时候,用户很可能就会纠结自己到底该不该留下来继续等待呢。
所以,这时候,loading动画就是一种缓解等待情绪的方式,当然还有更高端的,比如:骨架屏。有兴趣的朋友可以自行研究,我后续也会找机会分享一下。
下面,开始本文的主要内容,目前我在用的是Vue 2.x版本,ajax
请求用的是axios
,UI框架用的是elementUI。所以下面的loading用的是UI框架中的组件。
唠叨了这么多,接下来分享一下具体实现的代码(里面很多代码逻辑我已经去掉了,只剩下基础的部分):
代码可放在main.js
中。
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios' // loading框设置局部刷新,且所有请求完成后关闭loading框
let loading
let needLoadingRequestCount = 0 // 声明一个对象用于存储请求个数
function startLoading () {
loading = Vue.prototype.$loading({
lock: true,
text: '努力加载中...',
background: 'rgba(0,0,0,0.5)',
target: document.querySelector('.loading-area') // 设置加载动画区域
})
}
function endLoading () {
loading.close()
}
function showFullScreenLoading () {
if (needLoadingRequestCount === 0) {
startLoading()
}
needLoadingRequestCount++
}
function hideFullScreenLoading () {
if (needLoadingRequestCount <= 0) return
needLoadingRequestCount--
if (needLoadingRequestCount === 0) {
endLoading()
}
} // axios
axios.defaults.baseURL = process.env.NODE_ENV === 'production' ? '' : '/api' // 接口基础路径
axios.defaults.timeout = 20000 // 超时时间 20s
// axios.defaults.withCredentials = true // 允许设置cookie(开启的话需后端配置)
// http请求拦截器
axios.interceptors.request.use(config => {
if (config.isLoading !== false) { // 如果配置了isLoading: false,则不显示loading
showFullScreenLoading()
}
config.headers['Content-Type'] = 'application/json;charset=UTF-8'
return config
}, error => {
hideFullScreenLoading()
return Promise.reject(error.response)
})
// http响应拦截器
axios.interceptors.response.use(data => {
hideFullScreenLoading() // 响应成功关闭loading
return data
}, error => {
hideFullScreenLoading()
let _status = error.response && error.response.status
if (_status === 504 || _status === 404) {
// 跳转404页面(目前没有,只能先跳转首页)
//router.push({ path: '/' })
}
return Promise.reject(error)
})
Vue.prototype.$http = axios
ok,上面的代码就实现了全屏的loading动画。
注意:loading的样式是可以自定义的,文案也是可以自定义的。
vue+elementUI+axios实现的全局loading加载动画的更多相关文章
- 使用Dialog实现全局Loading加载框
Dialog实现全局Loading加载框 很多人在实现Loading加载框的时候,都是在当前的页面隐藏一个Loading布局,需要加载的时候,显示出来,加载完再隐藏 使用Dialog实现Loading ...
- 2款不同样式的CSS3 Loading加载动画 附源码
原文:2款不同样式的CSS3 Loading加载动画 附源码 我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...
- HTML5 五彩圆环Loading加载动画实现教程
原文:HTML5 五彩圆环Loading加载动画实现教程 今天我们要来介绍一款效果很特别的HTML5 Loading加载动画,不像其他的Loading动画,这款Loading动画颜色很丰富,并且在转圈 ...
- QT自定义控件系列(二) --- Loading加载动画控件
本系列主要使用Qt painter来实现一些基础控件.主要是对平时自行编写的一些自定义控件的总结. 为了简洁.低耦合,我们尽量不使用图片,qrc,ui等文件,而只使用c++的.h和.cpp文件. 由于 ...
- 16款纯CSS3实现的loading加载动画
分享16款纯CSS3实现的loading加载动画.这是一款实用的可替代GIF格式图片的CSS3加载动画代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div clas ...
- 10个样式各异的CSS3 Loading加载动画
前几天我在园子里分享过2款很酷的CSS3 Loading加载动画,今天又有10个最新的Loading动画分享给大家,这些动画的样式都不一样,实现起来也并不难,你很容易把它们应用在项目中,先来看看效果图 ...
- 原生JS+ CSS3创建loading加载动画;
效果图: js创建loading show = function(){ //loading dom元素 var Div = document.createElement("div" ...
- CSS动画实例:Loading加载动画效果(一)
一些网站或者APP在加载新东西的时候,往往会给出一个好看有趣的Loading图,大部分的Loading样式都可以使用CSS3制作出来,它不仅比直接使用gif图简单方便,还能节省加载时间和空间.下面介绍 ...
- CSS动画实例:Loading加载动画效果(三)
3.小圆型Loading 这类Loading动画的基本思想是:在呈现容器中定义1个或多个子层,再对每个子层进行样式定义,使得其均显示为一个实心圆形,最后编写关键帧动画控制,使得各个实心圆或者大小发生改 ...
随机推荐
- informix存储过程笔记
一.存储过程概述 存储过程是一个用户定义的函数,由存储过程语句(SPL) 和一组SQL语句组成,以可以执行代码形式存储在数据库中,和表.视图.索引等一样,是数据库的一种对象. 存储过程语言SPL(St ...
- Salesforce的对象关系
对象关系 Salesforce中的对象关系和一般的关系数据库不同. 在关系数据库中对象间的关系是由主键.外键等加以定义.而在Salesforce中,对象之间的关系是由自定义字段来确定. 这么做的原因是 ...
- 安卓投屏助手(B1358)之辅助调试
Android远程桌面助手的中文版——安卓投屏助手正式上线.安卓投屏和远程控制的软件其实已经非常多了,如Vysor.Total Control.Mobizen.ApowerMirror.TeamVie ...
- SQL 获取时间段内日期列表
declare @start date,@end date; set @start='2010-01-01'; set @end='2010-02-01'; --获取时间段内日期列表 select [ ...
- python-重载
重载概念 重载是对继承的父类方法进行重新定义.重载可以重新定义方法还可以重新定义运算符.因为通过继承的类不一定能满足当前类的需求.在当前类中只需要修改部分内容而达到自己的需求. 重载特点 减少代码量和 ...
- 利用Navicat高效率postgresql转mysql数据库
本人很喜欢postgresql数据库,也一直认为postgresql比mysql要更好更强大. 可生态环境太差了,无奈,最近要把一个小站转成mysql数据库. 小站主要表数据110万,pg_dump备 ...
- C语言实现将日期、时间保存到文本文件中
今天突然兴起,看来一下C语言的文件操作,以前在学习的时候,总是一带而过,觉得没有什么用处:但是现在看来,还真的没有什么用处,最后,我现在还有用到,当然这只是我的个人认为,并不能说明什么,在此我将自己写 ...
- centos7 安装 pyspider 出现的一系列问题及解决方案集合
先安装python3 和 pip3 wget https://www.python.org/ftp/python/3.6.5/Python-3.6.5.tgz 安装zlib-devel包(后面安装pi ...
- 012_python在shell下单行执行多行代码
一.有时候只是简单的获取下时间戳,不想在python解释器的交互模式下再去执行python代码,如何实现呢? 以循环输出多行为例: (1)第一种方式: python -c "exec(\&q ...
- 对多条件进行组合,生成笛卡尔积的用例集合的python代码实现
做专项测试需要对一些因素进行组合的测试,这里组合起来后数据量可能很大,我们可以用python来代劳 代码有优化空间,目前先用着. ************************代码开始******* ...