Vue3+TS的项目中使用NProgress进度条
本文主要介绍如何在 Vue3+TS 的项目中使用 NProgress 进度条，示例代码非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友往下看。
介绍
NProgress 是一个轻量级的进度条组件，它的原理非常简单，就是页面启动的时候，构建一个方法，创建一个 div，用 fixed 定位，把这个 div 定位在页面最顶部。相信很多小伙伴都知道，一个页面或者一个接口的进度计算是非常复杂的，即便能够被计算出来，那么消耗的性能也是非常大的，得不偿失，这个时候虚拟进度条的作用就显现出来了。开始进入处理方法的时候，就启动 loading 的效果，一旦捕获到这个方法结束，就去释放它，为了防止过程比较生硬，释放后也会有一个进度条缓慢加载到 100%的过程。很多项目上都在使用，最近在重构 Vue3 的版本，所以打算直接把它引用在新的项目上。
安装
yarn add nprogress
如果没有使用 TS 的话，安装上面库即可，如果使用了 TS 的话，需要安装@types/nprogress
yarn add @types/nprogress -D
封装
为了规范点，进行简单的封装，在 utils 目录下新建 nporgress.ts 文件，引入 NProgress 和 CSS 样式文件。
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
根据官方提供的文档，我们可以进行修改一些配置。
NProgress.configure({
easing: 'ease', // 动画方式
speed: 1000, // 递增进度条的速度
showSpinner: false, // 是否显示加载ico
trickleSpeed: 200, // 自动递增间隔
minimum: 0.3, // 更改启动时使用的最小百分比
parent: 'body', //指定进度条的父容器
})
最后我们封装两个方法，一个是开始方法，一个是结束的方法。
// 开启进度条
export const start = () => {
NProgress.start();
};
// 关闭进度条
export const close = () => {
NProgress.done();
};
使用
一般我们会在页面切换，也就是跳路由的时候会显示进度条，因此我们需要在 beforeEach（路由切换之前）和 afterEach（路由切换完成后）使用我们定义好的 close 和 start 方法。首先在 router 中导入（根据情况自行导入），我的是在 src/router/index.ts
// 导入进度条
import { start, close } from "@/utils/nporgress";
在 beforeEach 和 afterEach 中使用
router.beforeEach((pre, next) => {
start()
// 其他逻辑
})
router.afterEach(() => {
close()
})
高级用法
NProgress 还提供了一些高级用法，如 inc、set 等方法
百分比
我们可以手动设置进度条的百分比，使用 set 方法
NProgress.set(0.0);
NProgress.set(0.4);
NProgress.set(1.0);
其中值介于 0 到 1 之间
递增
只需使用.inc(), 这会随机增加它。这永远不会达到 100%。
NProgress.inc();
如果要增加特定值，可以将其作为参数传递：
NProgress.inc(0.2);
强制完成
通过传递 true 到 done()，即使没有显示进度条也会显示进度条。
NProgress.done(true);
获取状态值
NProgress.status
配置
NProgress 所有配置项
minimum
更改开始时使用的最小百分比，默认值 0.08
NProgress.configure({ minimum: 0.1 });
template
模版，可以自定义，但是要保留 role='bar'
NProgress.configure({
template: "<div class='....'>...</div>"
});
easing
缓动动画，默认值 ease
NProgress.configure({ easing: 'ease' });
speed
动画速度，默认值 200
NProgress.configure({ speed: 500 });
trickle
通过将此设置为 来关闭自动递增行为 false，默认值 true
NProgress.configure({ trickle: false });
trickleSpeed
调整涓流/增量的频率，以毫秒为单位。
NProgress.configure({ trickleSpeed: 200 });
showSpinner
通过将其设置为 false 来关闭加载微调器，默认值 true
NProgress.configure({ showSpinner: false });
parent
指定此项以更改父容器，默认值 body
NProgress.configure({ parent: '#container' });
positionUsing
位置，具体用法需要看源码。
barSelector
进度条控制器
NProgress.configure({ barSelector: '[role="bar"]' });
spinnerSelector
加载选择器
NProgress.configure({ spinnerSelector: '[role="spinner"]' });
自定义
我们可以通过修改 nprogress.css 文件自定义颜色，但是不建议这么做，因为版本升级或重新安装依赖都会覆盖，因此我们可以根据定义的 class 及 id，使用!important 定义并改变权重
#nprogress .bar {
background: rgba(54, 37, 178, 1) !important;
}
完成
效果如上图，至此在 Vue3+TS 项目上使用 NProgress 进度条的文章就结束了。