Composition API思想封裝NProgress示例詳解
正文
最近在用vue3封裝一套后臺(tái)管理模版,自然會(huì)用到NProgress
。如果你沒(méi)有用過(guò),你可以看一下instagram
,youtube
這些網(wǎng)站,它們都有一個(gè)頂部加載條,這也是現(xiàn)在最流行的網(wǎng)頁(yè)加載條。
于是我發(fā)現(xiàn)了@vueuse/integrations
中的useNProgress
,我們先看一下Anthony Fu大神如何去封裝的,然后咱們?cè)偃ピ囍约簩?shí)現(xiàn)一下。
安裝和基本使用
npm i nprogress @vueuse/integrations
基本使用如下,我們?cè)诙xvue-router
的地方使用
//router.js import { createRouter, createWebHashHistory } from 'vue-router' import { useNProgress } from '@vueuse/integrations/useNProgress' // 通過(guò)useNProgress,導(dǎo)出一個(gè)isLoading const { isLoading } = useNProgress(null,{ showSpinner: false }) const router = createRouter({ history: createWebHashHistory(), routes:[/*省略路由*/] }) // 在路由進(jìn)入和離開(kāi)的時(shí)候時(shí)候,改變isLoading router.beforeEach((to, from, next)=>{ isLoading.value = true next() }) router.afterEach((to, from, next)=>{ isLoading.value = false next() }) export default router
這樣就是實(shí)現(xiàn)了一個(gè)基本的進(jìn)度條,具體效果大家可以自行嘗試一下。
發(fā)現(xiàn)這個(gè)時(shí)候,我感覺(jué)很驚嘆,從來(lái)沒(méi)想過(guò)第三方庫(kù)也可以這樣的通過(guò)Composition API與vue去結(jié)合。而且,理論上這樣封裝我們是可以跨框架使用的。
自己實(shí)現(xiàn)一個(gè)
首先,我們定義一個(gè)入口函數(shù),同時(shí)通過(guò)ref來(lái)定一個(gè)isLoading
,同時(shí)為了兼容vue2,我們可以使用vue-demi
這個(gè)庫(kù)。
import { ref, watch } from 'vue-demi' import nprogress from 'nprogress' export const useNProgress = ()=>{ const isLoading = ref(false) watch(isLoading,(newVal)=>{ if(newVal){ return nprogress.start() } return nprogress.done() }) return { isLoading } } export default useNProgress
這樣就可以說(shuō)完成了基本的封裝,但是并不完美,watch并不是最好的解決方案,我在這里還有2種更好解決方法。
- computed + set:其實(shí)
computed
是可以修改的,只需要指定它的set就可以了 - 摒棄通過(guò)變量去控制,使用原始API,比如start,done。但這樣的話,我們其實(shí)沒(méi)有必要去封裝
于是我們開(kāi)始修改代碼,使用computed
.這樣就實(shí)現(xiàn)了與watch相同的效果,同時(shí)也吸收了computed
的一些優(yōu)點(diǎn)。 同時(shí)我們也把NProgress
的一些原生API導(dǎo)出出來(lái),用來(lái)實(shí)現(xiàn)更高的靈活性。
import { ref, computed } from 'vue-demi' import nprogress from 'nprogress' export const useNProgress = (instance,options)=>{ const isLoading = computed({ get:() => nprogress.isStarted() && nprogress.value<1, set:status => status ? nprogress.start() : nprogress.done() }) return { isLoading, start: nprogress.start, done: nprogress.done, } }
但是,有時(shí)候我們并不僅使用默認(rèn)樣式或配置,這時(shí)候我們需要傳入配置。同時(shí),有時(shí)候我們可能會(huì)自定義nprogress的實(shí)例,因此我把第一個(gè)參數(shù)命名為instance
,第二個(gè)參數(shù)自然是options
,這里其實(shí)無(wú)需我們?nèi)ゲ傩?,直接調(diào)用相關(guān)API即可。
/*省略其他邏輯*/ const progress = ref(instance) if(options){ nprogress.configure(options) }
在NProgress
中有一個(gè)比較有趣的APIinc
,我把它解釋為步進(jìn),就是每次前進(jìn)一點(diǎn)。我們可以把這個(gè)功能封裝進(jìn)去。
import { ref, computed,watchEffect,unref } from 'vue-demi' import nprogress from 'nprogress' export const useNProgress = (instance,options)=>{ const isLoading = computed({ get:() => nprogress.isStarted() && nprogress.value<1, set:status => status ? nprogress.start() : nprogress.done() }) const progress = ref(instance) if(options){ nprogress.configure(options) } watchEffect(()=>{ if(typeof unref(progress) === 'number'){ nprogress.set(progress.value) } }) return { isLoading, progress, step: nprogress.inc, start: nprogress.start, done: nprogress.done, reset()=>progress.value=0 } }
這樣,當(dāng)我們使用的時(shí)候,可以像我一開(kāi)始的時(shí)候,直接使用isLoading
,也可以使用step()
實(shí)現(xiàn)步進(jìn),也可以直接在傳入一個(gè)number,示例代碼如下
const {isLoading,progress,step} = useNProgress(0.1,null) progress.value = 0.2 //進(jìn)度條加載到0.2 step() //每次自動(dòng)步進(jìn) isLoading.value=false //直接結(jié)束加載
這樣封裝是不是更好使用了呢。而且,由于我并沒(méi)有把vue-router和這個(gè)耦合在一起,因此理論上react也可以使用的。
以上就是Composition API思想封裝NProgress示例詳解的詳細(xì)內(nèi)容,更多關(guān)于Composition API封裝NProgress的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
vue關(guān)于自定義指令與v-if沖突的問(wèn)題
這篇文章主要介紹了vue關(guān)于自定義指令與v-if沖突的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08element-ui el-dialog嵌套table組件,ref問(wèn)題及解決
這篇文章主要介紹了element-ui el-dialog嵌套table組件,ref問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-02-02如何解決Vue請(qǐng)求接口出現(xiàn)跨域問(wèn)題Access-Control-Allow-Origin
這篇文章主要介紹了如何解決Vue請(qǐng)求接口出現(xiàn)跨域問(wèn)題Access-Control-Allow-Origin,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10基于vue實(shí)現(xiàn)分頁(yè)組件的示例代碼
分頁(yè)組件是一種用戶界面元素,用于在長(zhǎng)列表或數(shù)據(jù)集中分割內(nèi)容,分頁(yè)組件是每個(gè)開(kāi)發(fā)人員必須掌握的一個(gè)組件,廣泛應(yīng)用在各個(gè)場(chǎng)所,用以用戶方便閱讀等,本文就給大家介紹一下如何基于vue寫(xiě)出的分頁(yè)組件,需要的朋友可以參考下2023-08-08vue中watch監(jiān)聽(tīng)器的觸發(fā)時(shí)機(jī)(watch的坑及解決)
這篇文章主要介紹了vue中watch監(jiān)聽(tīng)器的觸發(fā)時(shí)機(jī)(watch的坑及解決),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04vue實(shí)現(xiàn)卡片翻轉(zhuǎn)輪播展示
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)卡片翻轉(zhuǎn)輪播展示,同時(shí)在翻轉(zhuǎn)時(shí)切換數(shù)據(jù),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-01-01vue?props使用typescript自定義類型的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于vue?props使用typescript自定義類型的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-01-01vue-cli下的vuex的簡(jiǎn)單Demo圖解(實(shí)現(xiàn)加1減1操作)
這篇文章主要介紹了vue-cli下的vuex的簡(jiǎn)單Demo(實(shí)現(xiàn)加1減1操作),本文圖文并茂給大家介紹的非常詳細(xì),具有參考借鑒價(jià)值,需要的朋友可以參考下2018-02-02