这个进度条可以接口请求可以路由跳转以及局部进度条
路由进度条/ 接口请求路由(引入调用)
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>