NaiveUI使用LoadingBar组件

这个进度条可以接口请求可以路由跳转以及局部进度条

路由进度条/ 接口请求路由（引入调用）

import { createDiscreteApi} from 'naive-ui'
const {loadingBar} = createDiscreteApi(['loadingBar'])

// 设置前置路由守卫
router.beforeEach((to,from,next)=>{
    // 路由中导入-开始
    loadingBar.start()
    next()
})
// 设置后置路由守卫
router.afterEach((to,from,next)=>{
    // 路由中导入-结束
    loadingBar.finish()
})

局部进度条

调用页面引入n-loading-bar-provider组件，只要在于loadingBarTargetRef

<template>
  <n-loading-bar-provider
    :to="loadingBarTargetRef"
    container-style="position: absolute;"
  >
    <div
      ref="loadingBarTargetRef"
      style="
        position: absolute;
        inset: 0;
        border-radius: var(--n-border-radius);
        overflow: hidden;
        pointer-events: none;
      "
    />
    <loading-bar-trigger />
  </n-loading-bar-provider>
</template>

<script lang="ts">
import { defineComponent, h, ref } from 'vue'
import { NButton } from '../../../button'
import { NSpace } from '../../../space'
import { useLoadingBar } from '../../src/use-loading-bar'

export default defineComponent({
  components: {
    LoadingBarTrigger: defineComponent({
      setup () {
        const loadingBar = useLoadingBar()
        return () => {
          return h(NSpace, null, {
            default: () => [
              h(NButton, { onClick: () => loadingBar.start() }, () => 'Start'),
              h(NButton, { onClick: () => loadingBar.finish() }, () => 'Finish')
            ]
          })
        }
      }
    })
  },
  setup () {
    return {
      loadingBarTargetRef: ref<undefined | HTMLElement>(undefined)
    }
  }
})
</script>