useLoadingIndicator

描述

此組合式函式會回傳頁面的載入狀態。<NuxtLoadingIndicator> 元件使用此函式，且狀態可被控制。它會hook進 page:loading:start 和 page:loading:end 以變更其狀態。

參數

• duration: 載入指示條的持續時間，以毫秒為單位（預設值為 2000）。
• throttle: 節流顯示和隱藏的頻率，以毫秒為單位（預設值為 200）。
• estimatedProgress: 預設情況下，當進度接近 100% 時，Nuxt 會減速。您可以提供自訂函式來自訂進度估算，此函式會接收載入指示條的持續時間（如上所述）和經過的時間。它應傳回介於 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 } 以變更載入指示條顏色並將 error 屬性設為 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>