欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Composition API思想封裝NProgress示例詳解

 更新時(shí)間:2022年08月11日 09:53:20   作者:冒菜師  
這篇文章主要為大家介紹了Composition API思想封裝NProgress示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

正文

最近在用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)題

    這篇文章主要介紹了vue關(guān)于自定義指令與v-if沖突的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • element-ui el-dialog嵌套table組件,ref問(wèn)題及解決

    element-ui el-dialog嵌套table組件,ref問(wèn)題及解決

    這篇文章主要介紹了element-ui el-dialog嵌套table組件,ref問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-02-02
  • vue中v-for指令完成列表渲染

    vue中v-for指令完成列表渲染

    這篇文章主要給大家分享的是vue中v-for指令完成列表渲染,下面文化章就圍繞中v-for的相關(guān)資料在Vue中列表渲染做個(gè)簡(jiǎn)單總結(jié)和使用演示,需要的朋友可以參考一下,希望對(duì)大家有所幫助
    2021-11-11
  • 如何解決Vue請(qǐng)求接口出現(xiàn)跨域問(wèn)題Access-Control-Allow-Origin

    如何解決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è)組件的示例代碼

    基于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-08
  • vue中watch監(jiān)聽(tīng)器的觸發(fā)時(shí)機(jī)(watch的坑及解決)

    vue中watch監(jiān)聽(tīng)器的觸發(fā)時(shí)機(jī)(watch的坑及解決)

    這篇文章主要介紹了vue中watch監(jiān)聽(tīng)器的觸發(fā)時(shí)機(jī)(watch的坑及解決),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue實(shí)現(xiàn)卡片翻轉(zhuǎn)輪播展示

    vue實(shí)現(xiàn)卡片翻轉(zhuǎn)輪播展示

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)卡片翻轉(zhuǎn)輪播展示,同時(shí)在翻轉(zhuǎn)時(shí)切換數(shù)據(jù),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-01-01
  • vue?props使用typescript自定義類型的方法實(shí)例

    vue?props使用typescript自定義類型的方法實(shí)例

    這篇文章主要給大家介紹了關(guān)于vue?props使用typescript自定義類型的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2023-01-01
  • element-ui圖片上傳組件查看和限制方式

    element-ui圖片上傳組件查看和限制方式

    這篇文章主要介紹了關(guān)于element-ui圖片上傳組件查看和限制方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-03-03
  • vue-cli下的vuex的簡(jiǎn)單Demo圖解(實(shí)現(xiàn)加1減1操作)

    vue-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

最新評(píng)論