文章归档:https://www.yuque.com/u27599042/coding_star/mfmsrf9tz98ox3qg
安装
bash
pnpm i nprogress
配置 NProgress
其他更多可参考,仓库地址:https://github.com/rstacruz/nprogress
在 src/config/nprogress.js 中进行配置
是否展示右上角圆圈加载动画
javascript
NProgress.configure({
showSpinner: false
});
设置样式
src/styles/nprogress.css
css
#nprogress .bar {
/* 自定义进度条颜色 */
background: #fa2c19 !important;
}
#nprogress .peg {
/* 自定义进度条阴影颜色 */
box-shadow: 0 0 10px #fa2c19, 0 0 5px #fa2c19 !important;
}
启动时进度的最小百分比
默认 0.08
javascript
NProgress.configure({
minimum: 0.1
});
进度条动画和速度
动画可选值:
- linear:动画从开始到结束保持相同的速度。
- ease:默认值,动画有一个缓慢的开始,然后加速,在结束之前又变慢。
- ease-in:动画有一个缓慢的开始。
- ease-out:动画有一个缓慢的结束。
- ease-in-out:动画有一个缓慢的开始和一个缓慢的结束。
- cubic-bezier(n,n,n,n):在三次贝塞尔(cubic-bezier)函数中定义自己的值。可以是从 0 到 1 之间的数字值。
javascript
NProgress.configure({
easing: 'ease',
speed: 500
});
关闭自动递增
默认 true
javascript
NProgress.configure({
trickle: false
});
进度条递增速度
单位毫秒,多久自动递增一次
javascript
NProgress.configure({
trickleSpeed: 200
});
指定父容器
默认 body
javascript
NProgress.configure({
parent: '#container'
});
引入
在 main.js 中引入 nprogress 配置和样式
javascript
import "nprogress/nprogress.css" // nprogress 样式
import "@/styles/nprogress.css" // 自定义修改 nprogress
import '@/config/nprogress.js' // nprogress 配置
使用
javascript
// 在需要使用的地方导入
import NProgress from 'nprogress'
// 开启进度条
NProgress.start()
// 结束进度条
NProgress.done()
// 设置进度条百分比,n 取值 0 - 1
NProgress.set(n)
// 获取进度条状态
NProgress.status()
// 增加进度条进度,但不会到 100%,n 取值 0 - 1
NProgress.inc(n);
vue router 中使用
javascript
// 全局前置守卫
router.beforeEach(async(to, from, next) => {
// 开启进度条
NProgress.start();
}
// 全局后置守卫
router.afterEach(() => {
// 结束进度条
NProgress.done();
});
axios 中使用
javascript
//请求拦截器
instance.interceptors.request.use(
(config) => {
// 开启进度条
NProgress.start();
//...
},
(error) =>{
// 结束进度条
NProgress.done();
//...
}
);
//响应拦截器
instance.interceptors.response.use(
(response) => {
//响应成功
// 结束进度条
NProgress.done();
//...
},
(error) => {
// 结束进度条
NProgress.done();
//...
}
);