nuxt3实现自定义页面Loading效果

nuxt3实现自定义页面Loading效果

徐徐
前端
发布于2024-08-24 17:14:24
🌺前言
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
留言
暂无数据

~~空空如也