useLoadingIndicator

説明

ページのローディング状態を返すコンポーザブルです。 <NuxtLoadingIndicator>で使用され、制御可能です。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値の増加を開始します。

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>