LoadingBarProvider

LoadingBarProvider — это компонент-провайдер библиотеки Naive UI, предназначенный для глобального управления индикатором загрузки в приложении. Он упрощает отображение прогресса при выполнении асинхронных операций и обеспечивает согласованное взаимодействие с пользователем без необходимости вручную управлять отдельными состояниями прогресса.

Подключение и регистрация

Для использования LoadingBarProvider необходимо обернуть им корневой компонент приложения. Обычно это делается в App.vue или в точке входа приложения:

import { createApp } from 'vue'
import { create, NLoadingBarProvider } from 'naive-ui'
import App from './App.vue'

const naive = create()
const app = createApp(App)

app.use(naive)

app.component('LoadingBarProvider', NLoadingBarProvider)
app.mount('#app')

Ключевой момент: NLoadingBarProvider должен быть выше компонентов, которые будут инициировать загрузку, чтобы контекст провайдера был доступен для всех потомков.

Основные свойства

LoadingBarProvider имеет несколько важных параметров, которые можно настроить через атрибуты компонента или через пропсы при программном управлении:

color: задаёт цвет индикатора загрузки.

<LoadingBarProvider color="#42b983">
  <App />
</LoadingBarProvider>

height: определяет толщину полосы прогресса. Значение в пикселях.
```
<LoadingBarProvider height="4">
  <App />
</LoadingBarProvider>
```
position: место отображения на странице, чаще всего используется top.
duration: время автоматического завершения анимации при вызове finish().

Эти свойства позволяют гибко настраивать визуальное отображение загрузки под дизайн приложения.

Программное управление

Для управления индикатором загрузки используется хук useLoadingBar, который возвращает методы:

start() – запускает индикатор загрузки с нулевого значения.
finish() – плавно завершает текущий прогресс и скрывает индикатор.
error() – завершает индикатор с визуальным отображением ошибки.
update(percent: number) – вручную обновляет прогресс до указанного процента (0–100).

Пример использования внутри компонента:

import { useLoadingBar } from 'naive-ui'

export default {
  setup() {
    const loadingBar = useLoadingBar()

    const fetchData = async () => {
      loadingBar.start()
      try {
        await fetch('https://api.example.com/data')
        loadingBar.finish()
      } catch (e) {
        loadingBar.error()
      }
    }

    return { fetchData }
  }
}

Особенность: useLoadingBar можно вызывать только внутри потомков LoadingBarProvider. В противном случае контекст будет недоступен.

Асинхронные операции и автоматизация

LoadingBarProvider особенно полезен при работе с асинхронными действиями, такими как сетевые запросы или длительные вычисления. Комбинация с axios или fetch позволяет автоматически показывать прогресс:

import axios from 'axios'
import { useLoadingBar } from 'naive-ui'

const loadingBar = useLoadingBar()

axios.interceptors.request.use(config => {
  loadingBar.start()
  return config
})

axios.interceptors.response.use(
  response => {
    loadingBar.finish()
    return response
  },
  error => {
    loadingBar.error()
    return Promise.reject(error)
  }
)

Это обеспечивает единообразное отображение загрузки во всём приложении и избавляет от необходимости вручную вызывать методы в каждом компоненте.

Продвинутые возможности

Стилизация через CSS переменные: можно использовать кастомные CSS-переменные для изменения цвета, анимации и высоты полосы загрузки.
Множественные вызовы start(): библиотека умеет аккуратно обрабатывать последовательные вызовы start() и finish(), обеспечивая корректное отображение прогресса при одновременных асинхронных операциях.
Интеграция с роутером: при переходе между страницами можно автоматически запускать индикатор загрузки, подписавшись на события beforeEach и afterEach роутера Vue:

import router from './router'
import { useLoadingBar } from 'naive-ui'

const loadingBar = useLoadingBar()

router.beforeEach(() => {
  loadingBar.start()
})

router.afterEach(() => {
  loadingBar.finish()
})