<NuxtLoadingIndicator>
在頁面導航之間顯示進度條。
用法
在您的 app.vue 或 layouts/ 中加入 <NuxtLoadingIndicator/>。
app.vue
<template>
<NuxtLoadingIndicator />
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
在 文件 > 範例 > 路由 > 頁面 閱讀並編輯即時範例。
插槽
您可以透過載入指示器的預設插槽傳遞自訂 HTML 或元件。
屬性
color: 載入條的顏色。可以設定為false以關閉明確的顏色樣式。errorColor: 當error設定為true時，載入條的顏色。height: 載入條的高度，以像素為單位（預設值3）。duration: 載入條的持續時間，以毫秒為單位（預設值2000）。throttle: 延遲出現和隱藏的時間，以毫秒為單位（預設值200）。estimatedProgress: 預設情況下，Nuxt 會在接近 100% 時放緩速度。您可以提供自訂函式來自訂進度估算，該函式會接收載入條的持續時間（如上）和經過時間。它應該傳回介於 0 到 100 之間的值。
此元件為選用。
為了實現完全的自訂，您可以根據 其原始碼 實作您自己的元件。
為了實現完全的自訂，您可以根據 其原始碼 實作您自己的元件。
您可以使用 the
useLoadingIndicator composable 組合式函式掛鉤到基礎指示器實例，這將允許您自行觸發開始/結束事件。載入指示器的速度在達到由
estimatedProgress 控制的特定點後會逐漸降低。此調整更準確地反映了較長的頁面載入時間，並防止指示器過早顯示 100% 完成。