v3.17

<NuxtLoadingIndicator>

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

用法

¥Usage

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

¥Add <NuxtLoadingIndicator/> in your app.vue or layouts/.

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

插槽

¥Slots

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

¥You can pass custom HTML or components through the loading indicator's default slot.

Props

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