useLoadingIndicator

描述

一個可組合函式，返回頁面的載入狀態。由 <NuxtLoadingIndicator> 使用並可控。它透過監聽 page:loading:start 和 page:loading:end 來改變其狀態。

引數

• duration: 載入條的持續時間，單位毫秒（預設為 2000）。
• throttle: 節流出現和隱藏，單位毫秒（預設為 200）。
• estimatedProgress: 預設情況下，Nuxt 會在接近 100% 時減速。您可以提供一個自定義函式來定製進度估算，該函式接收載入條的持續時間（如上所述）和已用時間。它應該返回一個介於 0 到 100 之間的值。

屬性

isLoading

• 型別: Ref<boolean>
• 描述: 載入狀態

error

• 型別: Ref<boolean>
• 描述: 錯誤狀態

progress

• 型別: Ref<number>
• 描述: 進度狀態。從 0 到 100。

方法

start()

將 isLoading 設定為 true 並開始增加 progress 值。start 接受一個 { force: true } 選項，以跳過間隔並立即顯示載入狀態。

set()

將 progress 值設定為特定值。set 接受一個 { force: true } 選項，以跳過間隔並立即顯示載入狀態。

finish()

將 progress 值設定為 100，停止所有計時器和間隔，然後在 500 毫秒後重置載入狀態。finish 接受一個 { force: true } 選項，以跳過狀態重置前的間隔，以及 { error: true } 以改變載入條顏色並將錯誤屬性設定為 true。

clear()

由 finish() 使用。清除此可組合函式使用的所有計時器和間隔。

示例

<script setup lang="ts">
const { progress, isLoading, start, finish, clear } = useLoadingIndicator({
  duration: 2000,
  throttle: 200,
  // This is how progress is calculated by default
  estimatedProgress: (duration, elapsed) => (2 / Math.PI * 100) * Math.atan(elapsed / duration * 100 / 50),
})
</script>

<script setup lang="ts">
const { start, set } = useLoadingIndicator()
// same as set(0, { force: true })
// set the progress to 0, and show loading immediately
start({ force: true })
</script>