vue3 + ts + pnpm：nprogress / 页面顶部进度条效果实现
作者：snowball_li
NProgress是一款轻量级的进度条库,主要用于网页顶部显示页面加载或运行进度,它易于安装和使用,并提供良好的视觉效果,NProgress也可以与VueRouter结合使用,通过导航守卫在路由跳转时自动显示和隐藏进度条,该库的使用提高了用户对网页加载状态的感知,优化了用户体验
一、简介
nprogress 是一个轻量级的进度条库，它适用于在网页上添加顶部进度条，用于指示页面加载进度或任何长时间的运行过程。这个库非常流行，因为它易于使用且视觉效果很好。
二、安装
pnpm add nprogress
三、在使用的页面引入 / src/views/nprogress/index.vue
import NProgress from 'nprogress'; import 'nprogress/nprogress.css';
四、页面使用
4.1、配置 nprogress（可选）
NProgress.configure({ showSpinner: false }); // 关闭加载指示器4.2、代码
<template>
<div class="container">
<button @click="fetchData">获取数据</button>
</div>
</template>
<script setup lang="ts">
import NProgress from 'nprogress'
import 'nprogress/nprogress.css';
NProgress.configure({ showSpinner: false }); // 关闭加载指示器
const fetchData = () => {
NProgress.start(); // 开始进度条
setTimeout(() => {
NProgress.done(); // 完成进度条
console.log('success')
}, 3000);
}
</script>
<style scoped lang="less">
</style>4.3、效果
五、Vue Router 中使用
如果你在使用 Vue Router，并且想要在每个路由跳转时显示和隐藏进度条，你可以使用 Vue Router 的导航守卫。
import { createRouter, createWebHistory } from 'vue-router';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
const routes = [
// 你的路由定义
];
const router = createRouter({
history: createWebHistory(),
routes,
});
router.beforeEach((to, from, next) => {
NProgress.start();
next();
});
router.afterEach(() => {
NProgress.done();
});
export default router;六、欢迎交流指正
参考链接
https://www.npmjs.com/package/nprogress
简单又快捷的进度条—NProgress库了解一下-腾讯云开发者社区-腾讯云
到此这篇关于vue3 + ts + pnpm：nprogress / 页面顶部进度条的文章就介绍到这了,更多相关vue3页面顶部进度条内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！