<NuxtLoadingIndicator>

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

用法

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

app/app.vue
<template>
  <NuxtLoadingIndicator />
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>
Read and edit a live example in Docs > 4 X > Examples > Routing > Pages.

插槽

你可以通过 loading indicator 的默认插槽传入自定义的 HTML 或组件。

属性

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