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