React、Vue添加全局的请求进度条(nprogress)
全局的请求进度条,我们可以使用nprogress来实现,效果如下:
首先需要安装插件:
npm i nprogress -S
然后使用的时候主要有两种方式,第一种是切换页面的时候,第二种则是请求接口的时候。
切换页面可以在入口文件添加如下代码:
import NProgress from 'nprogress' // 引入nprogress插件
import 'nprogress/nprogress.css' // 这个nprogress样式必须引入 router.beforeEach((to, from, next) => {
NProgress.start()
next()
})
router.afterEach(() => {
NProgress.done()
})
接口请求的时候,则是在axios拦截器处进行处理,直接上代码:
// axios请求拦截器
axios.interceptors.request.use(
config => {
NProgress.start() // 设置加载进度条(开始..)
return config
},
error => {
return Promise.reject(error)
}
)
// axios响应拦截器
axios.interceptors.response.use(
function(response) {
NProgress.done() // 设置加载进度条(结束..)
return response
},
function(error) {
return Promise.reject(error)
}
)
当然也可以对进度条进行样式自定义
#nprogress .bar {
background: red !important; //自定义颜色
}
React、Vue添加全局的请求进度条(nprogress)的更多相关文章
- 轻量级进度条 – Nprogress.js
进度条库是前端中常见的库之一,bootstrap中提供了多种进度条样式.NProgress.js和nanobar.js是两款轻量级的进度条组件,使用简便. 官网: NProgress.js:http: ...
- vue多文件上传进度条 进度不更新问题
转自 hhttp://www.cnblogs.com/muge10/p/6767493.html 感谢这位兄弟的文章,之前因为这个问题 ,我连续在sgmentflow上提问过多次,完全没人能回答.谢谢 ...
- iOS WKWebView添加网页加载进度条(转)
一.效果展示 WKWebProgressViewDemo.gif 二.主要步骤 1.添加UIProgressView属性 @property (nonatomic, strong) WKWebView ...
- 基于Vue的事件响应式进度条组件
写在前面 找了很多Vue 进度条组件!,都不包含拖拽和点击事件,input range倒是原生包含input和change事件,但是直接基于input range做进度条的话,样式部分需要做大量调整和 ...
- 【React Native开发】React Native控件之ProgressBarAndroid进度条解说(12)
),React Native技术交流4群(458982758).请不要反复加群! 欢迎各位大牛,React Native技术爱好者增加交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文 ...
- 前端轻量级web进度条 – Nprogress & nanobar
转载:http://www.xuanfengge.com/front-end-nprogress-and-lightweight-web-progress-bar-nanobar.html 前言 进度 ...
- 插件使用一进度条---nprogress
nprogress 是像youtube一样在顶部出现进度条,用在一些加载比较缓慢的场景中. 官方网站是 http://ricostacruz.com/nprogress/ 源码在 https://gi ...
- vue实用组件——圆环百分比进度条
因为所在公司临近年底突然宣布Game Over,导致我等小码农又要踏上一个艰辛的求职道路了.才眨眼功夫,年就过完了,快乐的时光总是很匆忙呀. 开年的第一个面试,面试官问我会不会自己写一个圆环进图圈,这 ...
- vue---vue2.x自定义plugin,给vue添加全局方法,原型上增加全局方法
1. 自定义plugin.js export default{ install(Vue,options); { Vue.prototype.toStringTwo=(str)=>( ('0000 ...
随机推荐
- 基于 abp vNext 和 .NET Core 开发博客项目 - 统一规范API,包装返回模型
上一篇文章(https://www.cnblogs.com/meowv/p/12916613.html)使用自定义仓储完成了简单的增删改查案例,有心的同学可以看出,我们的返回参数一塌糊涂,显得很不友好 ...
- unity---string.Format()
string.Format用法 string.Format("{0}{1}{2}",str1,str2,str3) string.Format("{0:D2}{1:D2} ...
- 推荐一款复式记账软件——GnuCash
本文需要搞清楚两个事情,第一,什么是复式记账:第二,GnuCash操作 复式记账,来自百度百科的解释:复式记账法是以资产与权益平衡关系作为记账基础,对于每一笔经济业务,都要以相等的金额在两个或两个以上 ...
- linux DRM/KMS 测试工具 modetest、kmscude、igt-gpu-tools (一)
这里整理几个在学习Linux DRM/KMS中用到的几个工具,modetest.kmscude.igt-gpu-tools. 简介: modetest 是由libdrm提供的测试程序,可以查询显示设备 ...
- Floyd's Triangle
Floyd's Triangle Floyd's triangle is a right-angled triangular array of natural numbers. Floyd's tri ...
- java数值类型之间的转换
说明:图中6个实心箭头代表转换无信息丢失,3个虚线箭头表示可能有精度损失的转换.
- wordpress获取文章特色图像路径函数wp_get_attachment_image_src()
特色图像是wordpress主要的文章缩略图功能,几乎全部wordpress模板都使用或支持特色图像.今天介绍的wp_get_attachment_image_src()函数就是获取文章特色图像路径的 ...
- Life In Changsha College- 第四次冲刺
第四次冲刺任务 整体功能实现. 用户故事 用户打开“生活在长大”的界面,选择登录 已注册过则输入用户名和密码直接登录 未注册用户则可选择注册功能,注册成功后登录 登录成功则弹出提示框 进行留言 系统结 ...
- [COCOS2DX-LUA]0-003.根据COCOS2DX热更新
一.最近有需求就是要基于COCOS2DX-LUA进行游戏的增量更新,找了资料,发现了COCOS2DX有自带一个热更新的类,就是AssetsManager,但是该接口对于我来说有以下的缺陷 1.版本号在 ...
- java方式实现基数排序
一.基数排序描述 基数排序(radix sort)属于"分配式排序"(distribution sort),又称"桶子法"(bucket sort)或bin s ...