axios vue 加载效果动画_vue中使用axios拦截器实现数据加载之前的loading动画显示 @劉䔳...
首先新建一个 loading.vue组件,写loading动画效果
.loader {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center
}
@-webkit-keyframes loading{
50% {
transform: scale(.4);
opacity: .3
}
100% {
transform: scale(1);
opacity: 1
}
}
.loading{
position: relative
}
.loading span {
display: block;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #333;
position: absolute
}
.loading span:nth-of-type(1) {
top: 25px;
left: 0;
-webkit-animation: loading-3 1s ease 0s infinite
}
.loading span:nth-of-type(2) {
top: 17px;
left: 17px;
-webkit-animation: loading-3 1s ease -.12s infinite
}
.loading span:nth-of-type(3) {
top: 0;
left: 25px;
-webkit-animation: loading-3 1s ease -.24s infinite
}
.loading span:nth-of-type(4) {
top: -17px;
left: 17px;
-webkit-animation: loading-3 1s ease -.36s infinite
}
.loading span:nth-of-type(5) {
top: -25px;
left: 0;
-webkit-animation: loading-3 1s ease -.48s infinite
}
.loading span:nth-of-type(6) {
top: -17px;
left: -17px;
-webkit-animation: loading-3 1s ease -.6s infinite
}
.loading span:nth-of-type(7) {
top: 0;
left: -25px;
-webkit-animation: loading-3 1s ease -.72s infinite
}
.loading span:nth-of-type(8) {
top: 17px;
left: -17px;
-webkit-animation: loading-3 1s ease -.84s infinite
}
在vuex中写一个状态来操控我的loading组件显示隐藏
export const store = new Vuex.Store({
state:{
isShow:false
}
})
Axios拦截器配置 在main.js中
分别定义一个请求拦截器(请求开始时执行某些操作)、响应拦截器(接受到数据后执行某些操作),之间分别设置拦截时执行的操作,改变state内isShow的布尔值从而控制loading组件在触发请求数据开始时显示loading,返回数据时隐藏loading
axios.interceptors.request.use(function(config){
store.state.isShow=true; //在请求发出之前进行一些操作
return config
})
//定义一个响应拦截器
axios.interceptors.response.use(function(config){
store.state.isShow=false;//在这里对返回的数据进行处理
return config
})
在app.vue中引入我的loading组件
axios vue 加载效果动画_vue中使用axios拦截器实现数据加载之前的loading动画显示 @劉䔳...相关推荐
- 使用拦截器进行数据加解密
文章目录 使用拦截器进行数据加解密 1. 加解密工具 3. 加解密字段注解 3.1 加密注解 3.2 解密注解 4. 封装加解密工具 5. 拦截器 6. 不同框架配置说明 6.1 springboot ...
- spring拦截器覆盖_Spring中使用Interceptor拦截器
SpringMVC 中的Interceptor 拦截器也是相当重要和相当有用的,它的主要作用是拦截用户的请求并进行相应的处理.比如通过它来进行权限验证,或者是来判断用户是否登陆,或者是像12306 那 ...
- SpringMVC中使用Interceptor拦截器
2019独角兽企业重金招聘Python工程师标准>>> SpringMVC 中的Interceptor 拦截器也是相当重要和相当有用的,它的主要作用是拦截用户的请求并进行相应的处理. ...
- 在struts2中配置自定义拦截器放行多个方法
源码: 自定义的拦截器类: //自定义拦截器类:LoginInterceptor ; package com.java.action.interceptor; import javax.servlet ...
- 使用struts2中默认的拦截器以及自定义拦截器
转自:http://blog.sina.com.cn/s/blog_82f01d350101echs.html 如何使用struts2拦截器,或者自定义拦截器.特别注意,在使用拦截器的时候,在Acti ...
- 微软将在新版Edge浏览器中支持广告拦截器
3月31日消息,据路透社报道,微软周四表示,公司正在考虑让下一版本的Edge浏览器实现通过第三方拓展件支持广告过滤功能. 科技网站ZDNet今天早些时候根据一张拍摄自微软开发者大会的产品蓝图指出,该公 ...
- springboot中配置了拦截器后,拦截器无效的解决方案之一
springboot中配置了拦截器后,拦截器无效的解决方案之一 参考文章: (1)springboot中配置了拦截器后,拦截器无效的解决方案之一 (2)https://www.cnblogs.com/ ...
- vue实现进度条隐藏_Vue 中使用 NProgress 实现进度条
简介:NProgress 是浏览器加载时,出现在浏览器顶部的进度条. 文章目录: 一.NProgress 安装 二.NProgress 使用 三.NProgress 配置 四.Vue 中修改进度条颜色 ...
- axios获取图片显示_vue中使用axios post上传头像/图片并实时显示到页面的方法
在前端开发中,为了更好的用户体验,在头像上传时会先将图片显示到页面然后点击保存按钮 完成图片的上传成功 代码部分有参考他人的写法. html代码: 请上传图片 js代码: //实时显示该图片在页面 g ...
最新文章
- 在AWS中部署OpenShift平台
- ogg源端mysql添加trandata_OGG_GoldenGate日常维护(案例)
- flash动画设计期末作业_「2019年下学期」第二十五二十六节:期末作品三-吉祥物设计...
- 基于OWIN WebAPI 使用OAuth授权服务【客户端验证授权(Resource Owner Password Credentials Grant)】...
- Vmware 6.5.1正式版在Ubuntu 8.10下面运行非常缓慢的解决方
- Linux基本操作笔记
- Ebbinghaus English Memory ( 艾宾浩斯英语记忆 ) 程序 之 设计思路 与 代码实现
- matlab非牛顿流体,可用于常见非牛顿流体的数值模拟方法与流程
- SeaweedFS安全配置(Security Configuration)
- 第一辆定制款豪华电动汽车Battista Hyper GT揭晓
- js银行卡、手机号等校验汇总
- gpg: keyserver timed out
- multisim变压器反馈式_基于Multisim的负反馈放大电路仿真分析
- python大漠插件多开_绝地助手_python挪用大漠插件教程04鼠键事宜及基本项目头脑...
- 【从零开始的机器学习】-03 一元线性回归与代价函数
- 获得反向链接的正确方法
- 洛谷P2245 星际导航(kruskal重构树)
- goahead Web Server 环境搭建
- labview求n阶乘的和_LabVIEW小白入门——阶乘
- 都严肃点!史上最早的“喜当爹”其实是一项国家计划
热门文章
- 【渝粤教育】 广东开放大学 21秋期末考试互联网营销概论10092k2
- 【渝粤教育】国家开放大学2019年春季 3717天然气管道长输技术 参考试题
- 擦地机器人修理_自带眼睛还有嘴,喷水式擦地机器人效果实测
- 【自适应盲均衡10】基于判决引导(Decision Directed)的多径衰落信道双模式盲均衡算法与MATLAB仿真(DD-CMA)
- 【6】C++语法与数据结构之STL_list学生管理系统_链表外排序_函数指针
- java轮询文件停止线程,java 运行多线程轮询时,外部停止轮询
- ubuntu中mysql怎么退出命令_Ubuntu下MySQL简单操作
- springboot 注解动态赋值_SpringBoot 使用 @Value 注解读取配置文件给静态变量赋值
- NOIP模拟测试6「那一天我们许下约定(背包dp)·那一天她离我而去」
- 深入浅出《设计模式》之工厂模式(C++)