<NuxtLoadingIndicator>
Отображает индикатор выполнения постраничной навигации.
Использование
Добавьте <NuxtLoadingIndicator/> в ваш app.vue или layouts/.
app.vue
<template>
<NuxtLoadingIndicator />
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
Прочитайте и отредактируйте живой пример в Docs > Examples > Routing > Pages.
Слоты
Вы можете передавать пользовательский HTML или компоненты через слот по умолчанию индикатора загрузки.
Входные параметры
color: Цвет индикатора загрузки. Можно установитьfalse, чтобы отключить явное цветовое оформление.errorColor: Цвет индикатора загрузки, когдаerrorустановлен вtrue.height: Высота индикатора загрузки в пикселях (по умолчанию3).duration: Длительность индикатора загрузки в миллисекундах (по умолчанию2000).throttle: Регулировка отображения и скрытия в миллисекундах (по умолчанию200).estimatedProgress: По умолчанию Nuxt приостановит это по мере приближения к 100%. Вы можете предоставить пользовательскую функцию для настройки подсчета выполнения, которая представляет собой функцию, получающую длительность индикатора загрузки (выше) и прошедшее время. Она должна возвращать значение от 0 до 100.
Этот компонент является необязательным.
Чтобы добиться полной кастомизации, вы можете реализовать свой собственный на основе его исходного кода.
Чтобы добиться полной кастомизации, вы можете реализовать свой собственный на основе его исходного кода.
Вы можете подключиться к основному инстансу индикатора, используя композабл
useLoadingIndicator, который позволит вам самостоятельно запускать события запуска/завершения.Скорость загрузки индикатора постепенно снижается после достижения определенного значения, контролируемого
estimatedProgress. Эта регулировка обеспечивает более точное отражение увеличения времени загрузки страницы и предотвращает преждевременное отображение индикатором 100% завершения.