通过 100+ 个技巧学习 Nuxt!

<NuxtLoadingIndicator>

在页面导航之间显示进度条。

用法

在你的 app.vuelayouts/ 中添加 <NuxtLoadingIndicator/>

app.vue
<template>
  <NuxtLoadingIndicator />
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>
文档 > 示例 > 路由 > 页面 中阅读和编辑实时示例。

插槽

你可以通过加载指示器的默认插槽传递自定义 HTML 或组件。

Props

  • color:加载条的颜色。可以设置为 false 以关闭显式颜色样式。
  • errorColor:当 error 设置为 true 时,加载条的颜色。
  • height:加载条的高度,以像素为单位(默认为 3)。
  • duration:加载条的持续时间,以毫秒为单位(默认为 2000)。
  • throttle:节流出现和隐藏,以毫秒为单位(默认为 200)。
  • estimatedProgress:默认情况下,Nuxt 会在接近 100% 时退避。你可以提供自定义函数来自定义进度估计,该函数接收加载条的持续时间(如上)和经过的时间。它应返回介于 0 到 100 之间的值。
此组件是可选的。
为了实现完全自定义,你可以基于 其源代码 实现你自己的组件。
你可以使用 useLoadingIndicator composable 挂钩到基础指示器实例中,这将允许你自行触发 start/finish 事件。
加载指示器的速度在达到由 estimatedProgress 控制的特定点后逐渐降低。此调整更准确地反映了较长的页面加载时间,并防止指示器过早地显示 100% 完成。