🌺前言
nuxt3实现自定义页面Loading效果
1.自定义loading中的组件(略)
2.app.vue中引用该组件
xml
<NuxtLoadingIndicator color="blue"/>
<Loading v-if="isFullLoading"/>
<NuxtLayout>
<NuxtPage keepalive/>
</NuxtLayout>
3.通过nuxt3 hooks里控制显示隐藏
typescript
// 是否首次加载
const isFullLoading = ref(true)
const nuxtApp = useNuxtApp()
nuxtApp.hook('page:start', () => {
isFullLoading.value = true
})
nuxtApp.hook('page:finish', () => {
isFullLoading.value = false
})
目录
文章最后更新于 2024-08-30 16:29:39
作者:徐徐版权声明:转载请注明文章出处
留言

~~空空如也