v3.16
GitHub

<NuxtLoadingIndicator>

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

使用方法

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

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

插槽

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

属性

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