QAjaxBar индикатор загрузки

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

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

Импорт и базовое использование

Для использования QAjaxBar необходимо импортировать его из библиотеки:

import { QAjaxBar } from 'quasar';

В шаблоне Vue-компонента компонент подключается следующим образом:

<q-ajax-bar color="primary" position="top" :progress="loadingProgress" />
  • color — определяет цвет индикатора.
  • position — позиция на экране (top или bottom).
  • progress — реактивное значение прогресса (0–100), определяющее ширину индикатора.

Управление прогрессом через события

Одной из ключевых особенностей QAjaxBar является возможность управления прогрессом с помощью глобального плагина LoadingBar или вручную через реактивные переменные.

Пример автоматического управления через события:

this.$q.loadingBar.start(); // запуск анимации
axios.get('/api/data')
  .then(() => {
    this.$q.loadingBar.stop(); // завершение анимации
  })
  .catch(() => {
    this.$q.loadingBar.stop(); // завершение при ошибке
  });

Методы LoadingBar:

  • start() — начинает отображение индикатора.
  • stop() — завершает индикатор и скрывает его.
  • increment(amount) — увеличивает текущий прогресс на указанное значение (0–1).
  • set(value) — устанавливает конкретное значение прогресса (0–1).

Настройка внешнего вида

QAjaxBar предоставляет гибкие настройки внешнего вида:

  • color — можно использовать стандартные цвета темы Quasar (primary, secondary, accent) или произвольные CSS-цвета.
  • size — толщина индикатора в пикселях, например: size="4px".
  • position — расположение на странице: top или bottom.
  • skip-hijack — отключает автоматическое перехватывание axios-запросов, если необходимо вручную управлять прогрессом.

Пример с кастомными параметрами:

<q-ajax-bar color="red" size="6px" position="bottom" />

Интеграция с axios

Для отображения прогресса при загрузке данных через axios можно использовать интерцепторы:

import axios from 'axios';

axios.interceptors.request.use(config => {
  this.$q.loadingBar.start();
  return config;
});

axios.interceptors.response.use(response => {
  this.$q.loadingBar.stop();
  return response;
}, error => {
  this.$q.loadingBar.stop();
  return Promise.reject(error);
});

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

Пример кастомного прогресса

Можно управлять прогрессом вручную через реактивное свойство loadingProgress:

data() {
  return {
    loadingProgress: 0
  }
},
methods: {
  simulateProgress() {
    this.loadingProgress = 0;
    const interval = setInterval(() => {
      if (this.loadingProgress >= 100) {
        clearInterval(interval);
      } else {
        this.loadingProgress += 10;
      }
    }, 200);
  }
}

В шаблоне:

<q-ajax-bar color="green" :progress="loadingProgress" position="top" />
<q-btn label="Start" @click="simulateProgress" />

Советы по производительности

  • Использовать skip-hijack при больших приложениях с множеством параллельных запросов, чтобы не перегружать индикатор.
  • Управлять прогрессом через события start и stop, а не напрямую через DOM, чтобы сохранить реактивность.
  • Поддерживать единый цвет и стиль индикатора для всех страниц приложения, чтобы пользователи быстро воспринимали его как сигнал загрузки.

Взаимодействие с другими компонентами Quasar

QAjaxBar хорошо комбинируется с компонентами QLayout и QPageContainer, позволяя закрепить индикатор поверх всего контента:

<q-layout view="lHh Lpr lFf">
  <q-header elevated>
    <q-toolbar>
      <q-toolbar-title>Приложение</q-toolbar-title>
    </q-toolbar>
  </q-header>

  <q-page-container>
    <q-page padding>
      <q-ajax-bar color="primary" />
      <q-btn label="Load Data" @click="fetchData" />
    </q-page>
  </q-page-container>
</q-layout>

Поддержка темной темы

Индикатор автоматически подстраивается под текущую тему Quasar. Цвета primary, secondary и accent адаптируются к светлой или темной теме, обеспечивая гармоничный визуальный стиль.

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

Оглавление