説明

ページの読み込み状態を返すコンポーザブルです。<NuxtLoadingIndicator>によって使用され、制御可能です。状態を変更するためにpage:loading:startとpage:loading:endにフックします。

パラメータ

• duration: 読み込みバーの持続時間（ミリ秒単位、デフォルトは2000）。
• throttle: 表示と非表示のスロットル（ミリ秒単位、デフォルトは200）。
• estimatedProgress: デフォルトではNuxtは100%に近づくにつれてバックオフします。進捗の推定をカスタマイズするための関数を提供できます。この関数は読み込みバーの持続時間（上記）と経過時間を受け取り、0から100の値を返す必要があります。

プロパティ

isLoading

• type: Ref<boolean>
• description: 読み込み状態

error

• type: Ref<boolean>
• description: エラー状態

progress

• type: Ref<number>
• description: 進捗状態。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 })