<NuxtLoadingIndicator>

페이지 탐색 간에 진행률 표시줄을 표시합니다.

사용법

app.vue 또는 layouts/에서 <NuxtLoadingIndicator/>를 추가하세요.

app.vue

<template>
  <NuxtLoadingIndicator />
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

샘플 코드 편집 및 미리보기examples > routing > pages

로딩 인디케이터의 기본 슬롯을 통해 사용자 정의 HTML이나 컴포넌트를 전달할 수 있습니다.

color: 로딩 바의 색상입니다. 명시적 색상 스타일링을 끄려면 false로 설정할 수 있습니다.
errorColor: error가 true로 설정되었을 때 로딩 바의 색상입니다.
height: 로딩 바의 높이(픽셀 단위, 기본값 3).
duration: 로딩 바의 지속 시간(밀리초 단위, 기본값 2000).
throttle: 나타나고 사라지는 것을 조절하는 시간(밀리초 단위, 기본값 200).
estimatedProgress: 기본적으로 Nuxt는 100%에 가까워질수록 속도를 줄입니다. 로딩 바의 지속 시간(위)과 경과 시간을 받아 0에서 100 사이의 값을 반환하는 사용자 정의 함수를 제공하여 진행률 추정을 사용자 정의할 수 있습니다.

이 컴포넌트는 선택 사항입니다. :br 전체 사용자 정의를 위해 소스 코드를 기반으로 직접 구현할 수 있습니다.

the useLoadingIndicator composable를 사용하여 기본 인디케이터 인스턴스에 연결할 수 있으며, 이를 통해 시작/완료 이벤트를 직접 트리거할 수 있습니다.

로딩 인디케이터의 속도는 estimatedProgress에 의해 제어되는 특정 지점에 도달한 후 점차 감소합니다. 이 조정은 더 긴 페이지 로딩 시간을 보다 정확하게 반영하고 인디케이터가 100% 완료를 조기에 표시하는 것을 방지합니다.

※이 페이지는 Nuxt.js 공식 문서의 비공식 번역 페이지입니다.