<NuxtLoadingIndicator>

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

使用

在你的 app.vue 或 app/layouts/ 中添加 <NuxtLoadingIndicator/>。

app/app.vue
<template>
  <NuxtLoadingIndicator />
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>
在 Docs > 4 X > Examples > Routing > Pages 中阅读并编辑实时示例。

插槽

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

属性

  • color：加载条的颜色。可以设置为 false 以关闭显式颜色样式。
  • errorColor：当 error 设置为 true 时加载条的颜色。
  • height：加载条的高度（以像素为单位，默认为 3）。
  • duration：加载条的持续时间（以毫秒为单位，默认为 2000）。
  • throttle：显示和隐藏的节流时间（以毫秒为单位，默认为 200）。
  • estimatedProgress：默认情况下，Nuxt 会在接近 100% 时减缓进度。你可以提供一个自定义函数来自定义进度估算，该函数接收加载条的持续时间（见上文）和已用时间。它应该返回一个 0 到 100 之间的值。
此组件是可选的。
若要实现完全自定义，你可以基于它的源代码.
实现你自己的组件。你可以使用 useLoadingIndicator 组合式函数挂钩到底层指示器实例，这将允许你自行触发开始/结束事件。
在达到 estimatedProgress 控制的特定点后，加载指示器的速度会逐渐降低。这种调整能够更准确地反映较长的页面加载时间，并防止指示器过早显示 100% 完成。