vue3 + ts + pnpm：nprogress / 頁(yè)面頂部進(jìn)度條效果實(shí)現(xiàn)
更新時(shí)間：2024年09月23日 10:57:41 作者：snowball_li
NProgress是一款輕量級(jí)的進(jìn)度條庫(kù),主要用于網(wǎng)頁(yè)頂部顯示頁(yè)面加載或運(yùn)行進(jìn)度,它易于安裝和使用,并提供良好的視覺(jué)效果,NProgress也可以與VueRouter結(jié)合使用,通過(guò)導(dǎo)航守衛(wèi)在路由跳轉(zhuǎn)時(shí)自動(dòng)顯示和隱藏進(jìn)度條,該庫(kù)的使用提高了用戶對(duì)網(wǎng)頁(yè)加載狀態(tài)的感知,優(yōu)化了用戶體驗(yàn)
一、簡(jiǎn)介
nprogress 是一個(gè)輕量級(jí)的進(jìn)度條庫(kù)，它適用于在網(wǎng)頁(yè)上添加頂部進(jìn)度條，用于指示頁(yè)面加載進(jìn)度或任何長(zhǎng)時(shí)間的運(yùn)行過(guò)程。這個(gè)庫(kù)非常流行，因?yàn)樗子谑褂们乙曈X(jué)效果很好。
二、安裝
pnpm add nprogress
三、在使用的頁(yè)面引入 / src/views/nprogress/index.vue
import NProgress from 'nprogress'; import 'nprogress/nprogress.css';
四、頁(yè)面使用
4.1、配置 nprogress（可選）
NProgress.configure({ showSpinner: false }); // 關(guān)閉加載指示器4.2、代碼
<template>
<div class="container">
<button @click="fetchData">獲取數(shù)據(jù)</button>
</div>
</template>
<script setup lang="ts">
import NProgress from 'nprogress'
import 'nprogress/nprogress.css';
NProgress.configure({ showSpinner: false }); // 關(guān)閉加載指示器
const fetchData = () => {
NProgress.start(); // 開(kāi)始進(jìn)度條
setTimeout(() => {
NProgress.done(); // 完成進(jìn)度條
console.log('success')
}, 3000);
}
</script>
<style scoped lang="less">
</style>4.3、效果
五、Vue Router 中使用
如果你在使用 Vue Router，并且想要在每個(gè)路由跳轉(zhuǎn)時(shí)顯示和隱藏進(jìn)度條，你可以使用 Vue Router 的導(dǎo)航守衛(wèi)。
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
簡(jiǎn)單又快捷的進(jìn)度條—NProgress庫(kù)了解一下-騰訊云開(kāi)發(fā)者社區(qū)-騰訊云
到此這篇關(guān)于vue3 + ts + pnpm：nprogress / 頁(yè)面頂部進(jìn)度條的文章就介紹到這了,更多相關(guān)vue3頁(yè)面頂部進(jìn)度條內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
解決$store.getters調(diào)用不執(zhí)行的問(wèn)題
今天小編就為大家分享一篇解決$store.getters調(diào)用不執(zhí)行的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
element-ui tree結(jié)構(gòu)實(shí)現(xiàn)增刪改自定義功能代碼
這篇文章主要介紹了element-ui tree結(jié)構(gòu)實(shí)現(xiàn)增刪改自定義功能代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
本文主要介紹了el-table表頭文字換行的三種方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
本篇文章主要介紹了VueJS事件處理器v-on的使用方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
這篇文章主要為大家介紹了Vue組件之間的數(shù)據(jù)共享，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11
這篇文章主要介紹了vue樣式穿透 ::v-deep的具體使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
這篇文章主要介紹了vue實(shí)現(xiàn)的組件兄弟間通信功能,結(jié)合實(shí)例形式分析了vue兄弟組件間通信的原理與相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
vue頁(yè)面跳轉(zhuǎn)后返回原頁(yè)面初始位置方法
下面小編就為大家分享一篇vue頁(yè)面跳轉(zhuǎn)后返回原頁(yè)面初始位置方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
本文給大家分享的是如何使用vue實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊選中的效果，附上了實(shí)例代碼，有需要的小伙伴可以參考下2020-10-10
要在 Vue 項(xiàng)目中使用 svg-sprite-loader 來(lái)管理 SVG 圖標(biāo),需要執(zhí)行相應(yīng)的步驟,接下來(lái)通過(guò)本文給大家介紹VUE3 加載自定義SVG文件的詳細(xì)步驟,感興趣的朋友一起看看吧2024-01-01