一、安装依赖
pnpm i nprogress@0.2.0 --save
因为我们是TS的项目,还需要安装其类型声明文件,命令如下:
pnpm i @types/nprogress -D
二、封装工具类
在
utils
目录下创建progress.ts
,示例代码如下:
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 startProgress = () => {
NProgress.start()
}
// 关闭进度条
export const closeProgress = () => {
NProgress.done()
}
三、结合vue-router使用工具类
const router = createRouter({
routes,
history: createWebHistory(),
})
router.beforeEach(() => {
startProgress()
})
router.afterEach(() => {
closeProgress()
})
export default router
- beforeEach:路由切换之前触发
- afterEach:路由切换完成后触发
现在我们切换路由就可以实现顶部进度条的切换。
四、展示默认效果
五、修改默认的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>%VITE_APP_TITLE%</title>
<style>
#nprogress .bar {
background: orangered !important;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
六、API 说明
API | 作用 |
---|---|
NProgress.start() | 开启进度条 |
NProgress.done() | 关闭进度条 |
NProgress.set(n) | 设置进度条的百分比,其中 n 是 0 ~ 1 之间的数字 |
NProgress.inc() | 以随机量递增进度条,但永远不会达到 100% |
minimum | 进度条开始时的百分比(默认0.08) |
showSpinner | 是否显示右上角螺旋加载提示 |
parent | 设置父容器(默认body) |