Composition API思想封装NProgress示例详解

npm i nprogress @vueuse/integrations

//router.js
import { createRouter, createWebHashHistory } from 'vue-router'
import { useNProgress } from '@vueuse/integrations/useNProgress'
// 通过useNProgress，导出一个isLoading
const { isLoading } = useNProgress(null,{
  showSpinner: false
})
const router = createRouter({
  history: createWebHashHistory(),
  routes:[/*省略路由*/]
})
// 在路由进入和离开的时候时候，改变isLoading
router.beforeEach((to, from, next)=>{
  isLoading.value = true
  next()
})
router.afterEach((to, from, next)=>{
  isLoading.value = false
  next()
})
export default router

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

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, 
    }
}

/*省略其他逻辑*/
const progress = ref(instance)
if(options){
    nprogress.configure(options)
}

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

const {isLoading,progress,step} = useNProgress(0.1,null)
progress.value = 0.2 //进度条加载到0.2
step() //每次自动步进
isLoading.value=false //直接结束加载