Notify плагин

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

Подключение и настройка

В стандартной конфигурации Quasar плагин Notify доступен по умолчанию. Для его использования достаточно импортировать его из Quasar и вызвать соответствующий метод:

import { Notify } from 'quasar';

Notify.create({
  message: 'Пример уведомления',
  color: 'positive',
  icon: 'check_circle',
  position: 'top-right',
  timeout: 3000
});

Ключевые параметры:

  • message — текст уведомления. Может быть строкой или HTML.
  • color — цвет фона уведомления. Стандартные значения: primary, secondary, positive, negative, warning, info.
  • icon — иконка из Material Icons.
  • position — расположение уведомления на экране (top, bottom, top-left, top-right, bottom-left, bottom-right).
  • timeout — время в миллисекундах, через которое уведомление автоматически закроется. Значение 0 делает уведомление постоянным.

Разные типы уведомлений

Quasar предоставляет методы для создания уведомлений с предустановленными стилями:

Notify.create.positive('Операция выполнена успешно');
Notify.create.negative('Произошла ошибка');
Notify.create.warning('Внимание! Проверьте данные');
Notify.create.info('Информация обновлена');

Эти методы упрощают задачу, автоматически добавляя цвета и иконки.

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

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

import { Quasar } from 'quasar';

Quasar.notify.setDefaults({
  color: 'primary',
  position: 'bottom-right',
  timeout: 4000,
  icon: 'notifications'
});

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

Использование кастомных компонентов внутри уведомления

Notify поддерживает передачу Vue-компонентов для создания сложных уведомлений:

import CustomNotifyContent from 'components/CustomNotifyContent.vue';

Notify.create({
  component: CustomNotifyContent,
  position: 'top',
  timeout: 5000
});

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

Управление уведомлениями

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

const myNotify = Notify.create({
  message: 'Закроется через 5 секунд',
  timeout: 5000
});

myNotify.dismiss(); // немедленно закрывает уведомление

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

Notify.dismissAll();

События уведомлений

Каждое уведомление поддерживает обработку событий:

  • onDismiss — вызывается при закрытии уведомления (автоматическом или ручном).
  • onClick — вызывается при клике на уведомление.

Пример:

Notify.create({
  message: 'Нажмите для действия',
  onClick: () => console.log('Уведомление кликнуто'),
  onDismiss: () => console.log('Уведомление закрыто')
});

Анимации и позиции

Notify использует стандартные анимации для появления и скрытия уведомлений, которые можно настраивать через CSS классы. Также поддерживаются различные позиции, обеспечивающие гибкость расположения сообщений на экране:

  • top, bottom — центральные верхняя и нижняя позиции.
  • top-left, top-right, bottom-left, bottom-right — угловые позиции.

Комбинация с кастомными CSS-классами позволяет создавать уникальные визуальные эффекты.

Динамическое обновление уведомлений

С помощью ссылки на уведомление можно менять его параметры после создания:

const dynamicNotify = Notify.create({
  message: 'Загрузка...',
  timeout: 0
});

setTimeout(() => {
  dynamicNotify.set({
    message: 'Загрузка завершена',
    color: 'positive',
    icon: 'check'
  });
}, 3000);

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

Интеграция с Vuex и Composition API

В проектах с Vuex или Composition API Notify легко интегрируется для централизованного управления уведомлениями:

import { Notify } from 'quasar';
import { ref } from 'vue';

export function useNotify() {
  const notifyMessage = ref('');

  function showNotify(message, type = 'info') {
    Notify.create({ message, color: type });
  }

  return { notifyMessage, showNotify };
}

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

Notify плагин Quasar сочетает простоту использования с гибкой настройкой, позволяя создавать как стандартные всплывающие сообщения, так и полностью кастомизированные уведомления с интерактивным контентом. Его возможности охватывают цветовые схемы, позиции, события, анимации и динамическое обновление контента, что делает его незаменимым инструментом в современных веб-приложениях на Vue.js.

Оглавление