<NuxtLoadingIndicator>

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

使用方法

在你的 app.vuelayouts/ 中添加 <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 之间的值。
该组件是可选的。
为了实现完全自定义,你可以基于 它的源码 实现你自己的加载指示器。
你可以使用 useLoadingIndicator 组合函数 钩入底层的指示器实例,从而自行触发开始/结束事件。
加载指示器的速度在达到 estimatedProgress 控制的特定点后会逐渐减慢。此调整能更准确地反映较长页面加载时间,防止指示器过早显示 100% 完成。