説明

ページの読み込み状態を返すコンポーザブルです。<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()で使用されます。コンポーザブルで使用されるすべてのタイマーとインターバルをクリアします。

例

const { progress, isLoading, start, finish, clear } = useLoadingIndicator({
    duration: 2000,
    throttle: 200,
    // これはデフォルトでの進捗の計算方法です
    estimatedProgress: (duration, elapsed) => (2 / Math.PI * 100) * Math.atan(elapsed / duration * 100 / 50)
  })

const { start, set } = useLoadingIndicator()
  // set(0, { force: true })と同じ
  // 進捗を0に設定し、即座に読み込みを表示
  start({ force: true })