v3.16
Nuxt on GitHub

<NuxtLoadingIndicator>

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

使用方法

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

app.vue
<template>
  <NuxtLoadingIndicator />
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>
阅读并编辑实时示例中的内容 Docs > Examples > Routing > Pages.

插槽

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

属性

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