Loading плагин

Плагин Loading в Quasar предоставляет универсальный механизм для отображения индикаторов загрузки в приложении. Для начала необходимо убедиться, что плагин подключен в проекте. В файле quasar.conf.js подключение выглядит следующим образом:

plugins: [
  'Loading'
]

После этого плагин доступен глобально через объект this.$q.loading в компонентах Vue 3.

Основные методы

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

  • show(options) — отображает индикатор загрузки.
  • hide() — скрывает текущий индикатор.
  • setDefaults(options) — задаёт глобальные параметры для всех последующих вызовов.
  • isActive — булево свойство, показывающее, активен ли индикатор в данный момент.

Метод show

Сигнатура метода:

this.$q.loading.show(options)

Параметры options могут включать:

  • message — текст, отображаемый под индикатором.
  • spinner — тип спиннера (QSpinnerDots, QSpinnerBars, QSpinnerClock и другие).
  • backgroundColor — цвет фона overlay.
  • spinnerColor — цвет спиннера.
  • messageColor — цвет текста сообщения.
  • delay — задержка перед показом индикатора в миллисекундах.

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

this.$q.loading.show({
  message: 'Загрузка данных...',
  spinner: 'QSpinnerDots',
  spinnerColor: 'primary',
  backgroundColor: 'grey-8'
});

Метод hide

Метод скрывает индикатор, независимо от его текущих параметров:

this.$q.loading.hide()

Можно вызвать после завершения асинхронной операции:

async fetchData() {
  this.$q.loading.show({ message: 'Подождите, данные загружаются...' })
  try {
    const response = await axios.get('/api/data')
    this.data = response.data
  } finally {
    this.$q.loading.hide()
  }
}

Метод setDefaults

Позволяет задать глобальные настройки для всех вызовов show без необходимости передавать их каждый раз:

this.$q.loading.setDefaults({
  spinner: 'QSpinnerClock',
  spinnerColor: 'secondary',
  backgroundColor: 'black',
  messageColor: 'white'
});

После этого любой вызов this.$q.loading.show() будет использовать эти значения по умолчанию.

Применение с асинхронными операциями

Часто индикатор загрузки используется для визуализации длительных процессов. В Quasar это удобно комбинировать с async/await:

async saveForm(formData) {
  this.$q.loading.show({ message: 'Сохраняем данные...' })
  try {
    await api.save(formData)
    this.$q.notify({ type: 'positive', message: 'Данные сохранены!' })
  } catch (error) {
    this.$q.notify({ type: 'negative', message: 'Ошибка сохранения!' })
  } finally {
    this.$q.loading.hide()
  }
}

Такой подход гарантирует, что индикатор будет скрыт даже при возникновении ошибки.

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

Quasar предоставляет возможность использовать собственные компоненты спиннеров. Для этого достаточно передать компонент в опцию spinner:

import MyCustomSpinner from 'components/MyCustomSpinner.vue'

this.$q.loading.show({
  spinner: MyCustomSpinner,
  message: 'Обработка данных...'
});

Можно использовать анимации, SVG или любые Vue-компоненты, сохраняя гибкость и стиль приложения.

Управление множественными индикаторами

Плагин Loading поддерживает только один активный индикатор одновременно. Любой новый вызов show() автоматически заменяет предыдущий. Чтобы контролировать разные процессы, рекомендуется использовать локальные состояния компонентов вместе с условным рендерингом:

<template>
  <q-page>
    <q-btn @click="loadA">Загрузка A</q-btn>
    <q-btn @click="loadB">Загрузка B</q-btn>

    <q-linear-progress
      v-if="loading"
      indeterminate
      color="primary"
    />
  </q-page>
</template>

<script setup>
import { ref } from 'vue'
const loading = ref(false)

async function loadA() {
  loading.value = true
  await fetch('/api/a')
  loading.value = false
}

async function loadB() {
  loading.value = true
  await fetch('/api/b')
  loading.value = false
}
</script>

Взаимодействие с Notify и Dialog

Индикатор загрузки часто комбинируется с Notify и Dialog. Например, для долгой операции с подтверждением:

this.$q.dialog({
  title: 'Подтверждение',
  message: 'Вы уверены, что хотите удалить запись?',
  cancel: true,
  persistent: true
}).onOk(async () => {
  this.$q.loading.show({ message: 'Удаляем запись...' })
  try {
    await api.deleteRecord(id)
    this.$q.notify({ type: 'positive', message: 'Запись удалена' })
  } finally {
    this.$q.loading.hide()
  }
})

Контроль активности

Свойство isActive позволяет проверять, отображается ли индикатор в данный момент:

if (!this.$q.loading.isActive) {
  this.$q.loading.show({ message: 'Загрузка...' })
}

Это полезно для предотвращения многократных вызовов show и предотвращения перекрытия нескольких индикаторов.

Настройка глобальных тем

Через quasar.conf.js можно задать глобальные параметры стилей для Loading, включая цвета overlay и тип спиннера по умолчанию:

framework: {
  config: {
    loading: {
      spinner: 'QSpinnerGears',
      spinnerColor: 'accent',
      backgroundColor: 'grey-9',
      messageColor: 'white'
    }
  }
}

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

Использование с Composition API

В setup() можно использовать Loading через getCurrentInstance() или через useQuasar():

import { useQuasar } from 'quasar'

const $q = useQuasar()

async function fetchData() {
  $q.loading.show({ message: 'Идет загрузка...' })
  try {
    const data = await axios.get('/api/data')
  } finally {
    $q.loading.hide()
  }
}

Этот подход обеспечивает полное соответствие современным стандартам Vue 3 и Composition API.

Поддержка мобильных устройств

Loading автоматически подстраивается под размер экрана и сенсорное взаимодействие. Overlay блокирует все элементы под ним, предотвращая случайные нажатия. Цвета и прозрачность легко настраиваются для удобного отображения на мобильных дисплеях.

Резюме ключевых возможностей

  • Универсальное отображение индикаторов загрузки.
  • Полная кастомизация спиннера, сообщений и цветов.
  • Легкая интеграция с асинхронными операциями, Notify и Dialog.
  • Глобальные настройки и локальное управление через Composition API.
  • Автоматическая адаптация под мобильные устройства и overlay-блокировка.

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

Оглавление