vue3 + ts + pnpm：nprogress / 頁面頂部進度條效果實現(xiàn)
更新時間：2024年09月23日 10:57:41 作者：snowball_li
NProgress是一款輕量級的進度條庫,主要用于網(wǎng)頁頂部顯示頁面加載或運行進度,它易于安裝和使用,并提供良好的視覺效果,NProgress也可以與VueRouter結(jié)合使用,通過導(dǎo)航守衛(wèi)在路由跳轉(zhuǎn)時自動顯示和隱藏進度條,該庫的使用提高了用戶對網(wǎng)頁加載狀態(tài)的感知,優(yōu)化了用戶體驗
一、簡介
nprogress 是一個輕量級的進度條庫，它適用于在網(wǎng)頁上添加頂部進度條，用于指示頁面加載進度或任何長時間的運行過程。這個庫非常流行，因為它易于使用且視覺效果很好。
二、安裝
pnpm add nprogress
三、在使用的頁面引入 / src/views/nprogress/index.vue
import NProgress from 'nprogress'; import 'nprogress/nprogress.css';
四、頁面使用
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(); // 開始進度條
setTimeout(() => {
NProgress.done(); // 完成進度條
console.log('success')
}, 3000);
}
</script>
<style scoped lang="less">
</style>4.3、效果
五、Vue Router 中使用
如果你在使用 Vue Router，并且想要在每個路由跳轉(zhuǎ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
簡單又快捷的進度條—NProgress庫了解一下-騰訊云開發(fā)者社區(qū)-騰訊云
到此這篇關(guān)于vue3 + ts + pnpm：nprogress / 頁面頂部進度條的文章就介紹到這了,更多相關(guān)vue3頁面頂部進度條內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本篇文章主要介紹了Vue 2.0 服務(wù)端渲染入門，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
這篇文章主要介紹了vue中data數(shù)據(jù)之間如何賦值問題，具有很好的參考價值，希望對大家有所幫助。2022-09-09
這篇文章主要介紹了Vue不能檢測到數(shù)據(jù)變化的幾種情況說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了正確快速使用Vue中的插槽和配置代理的相關(guān)知識,插槽分為三種，分別是默認插槽、具名插槽、作用域插槽，下面分別列出了如何使用這三種插槽，需要的朋友可以參考下2023-01-01
Vue使用emit傳參,父組件接收不到數(shù)據(jù)的問題及解決
這篇文章主要介紹了Vue使用emit傳參,父組件接收不到數(shù)據(jù)的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-09-09
防抖（Debounce）在前端開發(fā)中是一種常用的技術(shù),它的作用是限制某個操作在短時間內(nèi)的頻繁觸發(fā),下面我們就來看看如何一個Vue指令搞定函數(shù)防抖吧2024-02-02
Vue中調(diào)用組件使用kebab-case短橫線命名法和使用大駝峰的區(qū)別詳解
這篇文章主要介紹了Vue中調(diào)用組件使用kebab-case（短橫線）命名法和使用大駝峰的區(qū)別,通過實例可以看出如果是在html中使用組件，那么就不能用大駝峰式寫法，如果是在.vue?文件中就可以，需要的朋友可以參考下2023-10-10
在Vue 3.0中,與2.0版本相比有一定的差別,最明顯的就是缺少了build、config文件夾,下面這篇文章主要給大家介紹了關(guān)于vue3中vue.config.js配置及注釋的相關(guān)資料,需要的朋友可以參考下2022-08-08
elementUI組件中el-date-picker限制時間范圍精確到小時的方法
現(xiàn)在需要做一個時間選擇器,可以根據(jù)小時(同時選天和小時)和天?和月,節(jié)假日等類型控制日歷的選擇樣式,下面這篇文章主要給大家介紹了關(guān)于elementUI組件中el-date-picker限制時間范圍精確到小時的相關(guān)資料,需要的朋友可以參考下2023-04-04
Vue3 獲取地址欄參數(shù)有兩個方式：查詢參數(shù)和路徑參數(shù)。Vue3獲取地址欄參數(shù)是從路由router中獲取，查詢參數(shù)和路徑參數(shù)獲取方式不一樣。感興趣的同學可以參考閱讀2023-04-04