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 }オプションと、ローディングバーの色を変更しエラープロパティを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>