本文主要介绍如何在 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 所有配置项
更改开始时使用的最小百分比,默认值 0.08
NProgress.configure({ minimum: 0.1 });
模版,可以自定义,但是要保留 role='bar'
NProgress.configure({
template: "<div class='....'>...</div>"
});
缓动动画,默认值 ease
NProgress.configure({ easing: 'ease' });
动画速度,默认值 200
NProgress.configure({ speed: 500 });
通过将此设置为 来关闭自动递增行为 false,默认值 true
NProgress.configure({ trickle: false });
调整涓流/增量的频率,以毫秒为单位。
NProgress.configure({ trickleSpeed: 200 });
通过将其设置为 false 来关闭加载微调器,默认值 true
NProgress.configure({ showSpinner: false });
指定此项以更改父容器,默认值 body
NProgress.configure({ parent: '#container' });
位置,具体用法需要看源码。
进度条控制器
NProgress.configure({ barSelector: '[role="bar"]' });
加载选择器
NProgress.configure({ spinnerSelector: '[role="spinner"]' });
我们可以通过修改 nprogress.css 文件自定义颜色,但是不建议这么做,因为版本升级或重新安装依赖都会覆盖,因此我们可以根据定义的 class 及 id,使用!important 定义并改变权重
#nprogress .bar {
background: rgba(54, 37, 178, 1) !important;
}
效果如上图,至此在 Vue3+TS 项目上使用 NProgress 进度条的文章就结束了。