vue 添加NProgress进度条插件

NProgress

NProgress是页面跳转是出现在浏览器顶部的进度条。

官网：http://ricostacruz.com/nprogress

github：https://github.com/rstacruz/nprogress

安装

npm install nprogress

# 如果使用 ts，还需安装 @types/nprogress
npm install @types/nprogress --save-dev
1
2
3
4

import 导入后，若提示无法找到。那么，需要在 vue3 ts版本的.env.d.ts中声明一下：declare module ‘nprogress’

路由中使用

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

router.beforeEach((to, from , next) => {
   NProgress.start();   //每次切换页面时，调用进度条
   next();    //没有 next() 页面不会跳转
});

router.afterEach(() => {
   NProgress.done();   // 在即将进入新的页面组件前，关闭掉进度条
})
1
2
3
4
5
6
7
8
9
10
11

封装axios中使用

//在 request 拦截器中显示进度条 Nprogress.start()
axios.interceptors.request.use(config => {
   NProgress.start();   //请求开始时显示进度条
   return config
})

//response中完成进度条 Nprogress.done()
axios.interceptors.response.use(config => {
   NProgress.done();   //服务响应时完成进度条
   return config
})
1
2
3
4
5
6
7
8
9
10
11

NProgress属性介绍

NProgress.start()    // 开始
NProgress.set(0.4)   // 设置进度，0-1
NProgress.inc()      // 让进度条增加
NProgress.done()     // 完成
1
2
3
4

1、百分比：通过设置 progress 的百分比，调用set(n)来控制进度，其中 n 的取值范围为 0-1。

NProgress.set(0.0);    
NProgress.set(0.4);
NProgress.set(1.0); 
1
2
3

2、递增：要让进度条增加，只要调用inc()。这会产生一个随机增量，但不会让进度条达到 100%。此函数适用于图片加载或其他类似的文件加载。

NProgress.inc();
1

3、强制完成：done()设定true，强制使进度条显示满格，即使它开始状态，没有被显示出来。

NProgress.done(true);
1

4、minimum：设置最低百分比

NProgress.configure({ minimum: 0.1 });
1

5、template：改变进度条的 HTML 结构。为保证进度条能正常工作，需要元素拥有role='bar’属性。

NProgress.configure({
   template:"
...
"
});
1
2
3

6、ease：调整动画设置，ease 可传递 CSS3 缓冲动画字符串（如 ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier）。speed为动画速度（单位 ms）。

NProgress.configure({ ease: 'ease', speed: 500 });
1

7、自定义进度条颜色

#nprogress .bar {
  background: red !important;
}
1
2
3

进度条配置

NProgress.configure({
   easing: 'ease',  // 动画方式，和css动画属性一样（默认：ease）
   speed: 500,  // 递增进度条的速度，单位ms（默认： 200）
   showSpinner: false,  // 是否显示加载ico
   trickle: true,  //是否自动递增
   trickleSpeed: 200,  // 自动递增间隔
   minimum: 0.3,   // 初始化时的最小百分比，0-1（默认：0.08）
   parent: '#container'  //指定此选项以更改父容器（默认：body）
})
1
2
3
4
5
6
7
8
9