<NuxtLoadingIndicator>
在页面导航之间显示进度条。
用法
在你的 app.vue
或 layouts/
中添加 <NuxtLoadingIndicator/>
。
app.vue
<template>
<NuxtLoadingIndicator />
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
在 文档 > 示例 > 路由 > 页面 中阅读和编辑实时示例。
插槽
你可以通过加载指示器的默认插槽传递自定义 HTML 或组件。
Props
color
:加载条的颜色。可以设置为false
以关闭显式颜色样式。errorColor
:当error
设置为true
时,加载条的颜色。height
:加载条的高度,以像素为单位(默认为3
)。duration
:加载条的持续时间,以毫秒为单位(默认为2000
)。throttle
:节流出现和隐藏,以毫秒为单位(默认为200
)。estimatedProgress
:默认情况下,Nuxt 会在接近 100% 时退避。你可以提供自定义函数来自定义进度估计,该函数接收加载条的持续时间(如上)和经过的时间。它应返回介于 0 到 100 之间的值。
此组件是可选的。
为了实现完全自定义,你可以基于 其源代码 实现你自己的组件。
为了实现完全自定义,你可以基于 其源代码 实现你自己的组件。
你可以使用
useLoadingIndicator
composable 挂钩到基础指示器实例中,这将允许你自行触发 start/finish 事件。加载指示器的速度在达到由
estimatedProgress
控制的特定点后逐渐降低。此调整更准确地反映了较长的页面加载时间,并防止指示器过早地显示 100% 完成。