Description

페이지의 로딩 상태를 반환하는 컴포저블입니다. <NuxtLoadingIndicator>에서 사용되며 제어 가능합니다. 상태를 변경하기 위해 page:loading:start 및 page:loading:end에 연결됩니다.

Parameters

• duration: 로딩 바의 지속 시간, 밀리초 단위 (기본값 2000).
• throttle: 나타나고 사라지는 것을 제한하는 시간, 밀리초 단위 (기본값 200).
• estimatedProgress: 기본적으로 Nuxt는 100%에 가까워질수록 속도를 줄입니다. 로딩 바의 지속 시간(위)과 경과 시간을 받아 0에서 100 사이의 값을 반환하는 사용자 정의 함수를 제공하여 진행률 추정을 사용자 정의할 수 있습니다.

Properties

isLoading

• type: Ref<boolean>
• description: 로딩 상태

error

• type: Ref<boolean>
• description: 에러 상태

progress

• type: Ref<number>
• description: 진행 상태. 0에서 100까지.

Methods

start()

isLoading을 true로 설정하고 progress 값을 증가시키기 시작합니다. start는 간격을 건너뛰고 즉시 로딩 상태를 표시하기 위해 { force: true } 옵션을 허용합니다.

set()

progress 값을 특정 값으로 설정합니다. set은 간격을 건너뛰고 즉시 로딩 상태를 표시하기 위해 { force: true } 옵션을 허용합니다.

finish()

progress 값을 100으로 설정하고 모든 타이머와 간격을 중지한 후 500 ms 후에 로딩 상태를 재설정합니다. finish는 상태가 재설정되기 전에 간격을 건너뛰기 위한 { force: true } 옵션과 로딩 바 색상을 변경하고 에러 속성을 true로 설정하기 위한 { error: true } 옵션을 허용합니다.

clear()

finish()에서 사용됩니다. 컴포저블에서 사용된 모든 타이머와 간격을 지웁니다.

Example

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 })