<NuxtLoadingIndicator>

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

用法

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

app.vue

<template>
  <NuxtLoadingIndicator />
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

示例代码的编辑与预览examples > routing > pages

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

color: 加载条的颜色。可以设置为 false 来关闭显式颜色样式。
errorColor: 当 error 设置为 true 时加载条的颜色。
height: 加载条的高度，以像素为单位（默认 3）。
duration: 加载条的持续时间，以毫秒为单位（默认 2000）。
throttle: 控制出现和隐藏的节流时间，以毫秒为单位（默认 200）。
estimatedProgress: 默认情况下，Nuxt 会在接近 100% 时逐渐减速。你可以提供一个自定义函数来定制进度估算，该函数接收加载条的持续时间（如上）和经过的时间。它应返回一个介于 0 和 100 之间的值。

这个组件是可选的。:br 为了实现完全自定义，你可以基于其源代码实现自己的版本。

你可以使用 the useLoadingIndicator composable 钩入底层指示器实例，这将允许你自己触发开始/完成事件。

加载指示器的速度在达到由 estimatedProgress 控制的特定点后逐渐减慢。此调整提供了更准确的较长页面加载时间反映，并防止指示器过早显示 100% 完成。

※此页面是 Nuxt.js 官方文档的非官方翻译页面。