<NuxtLoadingIndicator>

原始檔
在頁面導航之間顯示一個進度條。

使用

在你的 app.vue 或 app/layouts/ 中新增 <NuxtLoadingIndicator/>。

app/app.vue
<template>
  <NuxtLoadingIndicator />
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>
在 Docs > 4 X > Examples > Routing > Pages 中閱讀並編輯即時示例。

插槽

你可以透過載入指示器的預設插槽傳遞自定義 HTML 或元件。

屬性

  • color：載入條的顏色。可以設定為 false 以關閉顯式顏色樣式。
  • errorColor：當 error 設定為 true 時，載入條的顏色。
  • height：載入條的高度，以畫素為單位（預設 3）。
  • duration：載入條的持續時間，以毫秒為單位（預設 2000）。
  • throttle：出現和隱藏的節流時間，以毫秒為單位（預設 200）。
  • estimatedProgress：預設情況下，Nuxt 會在接近 100% 時減速。你可以提供一個自定義函式來定製進度估算，該函式接收載入條的持續時間（如上）和已逝時間。它應該返回一個介於 0 到 100 之間的值。
此元件是可選的。
為了實現完全自定義，你可以基於其原始碼來實現你自己的載入指示器。其原始碼.
你可以使用 useLoadingIndicator 可組合項 來鉤入底層指示器例項，這將允許你自行觸發開始/結束事件。
載入指示器的速度在達到由 estimatedProgress 控制的特定點後會逐漸減慢。這種調整可以更準確地反映較長的頁面載入時間，並防止指示器過早顯示 100% 完成。