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

Системные уведомления в Quasar Framework предоставляют мощный и гибкий механизм для информирования пользователей о событиях, изменениях состояния приложения или ошибках. В Quasar это реализовано через компонент Notify, который интегрируется как с Vue 3, так и с Composition API.

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

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

import { Notify } from 'quasar'

Базовое уведомление создается вызовом метода create:

Notify.create({
  message: 'Операция выполнена успешно',
  color: 'positive',
  position: 'top-right',
  timeout: 3000
})
  • message — текст уведомления. Может содержать HTML при использовании свойства html.
  • color — цвет уведомления (primary, secondary, positive, negative, warning, info).
  • position — расположение на экране (top, bottom, top-left, top-right, bottom-left, bottom-right).
  • timeout — длительность отображения в миллисекундах. Значение 0 делает уведомление постоянным.

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

1. Стандартные уведомления Представляют собой простое сообщение с цветовой индикацией и иконкой по умолчанию.

Notify.create({
  message: 'Ошибка при загрузке данных',
  color: 'negative',
  icon: 'warning'
})

2. Уведомления с действиями (actions) Позволяют добавлять кнопки или действия прямо в уведомление:

Notify.create({
  message: 'Файл не сохранен',
  color: 'warning',
  actions: [
    {
      label: 'Повторить',
      color: 'white',
      handler: () => { console.log('Повтор действия') }
    },
    {
      label: 'Отмена',
      color: 'white',
      handler: () => { console.log('Действие отменено') }
    }
  ]
})

3. HTML-уведомления Позволяют использовать HTML-код в тексте уведомления. Для этого нужно указать html: true:

Notify.create({
  html: true,
  message: '<b>Успешно:</b> данные обновлены',
  color: 'positive'
})

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

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

import { boot } from 'quasar/wrappers'
import { Notify } from 'quasar'

export default boot(({ app }) => {
  Notify.setDefaults({
    position: 'bottom-right',
    timeout: 4000,
    textColor: 'white'
  })
})

После этого вызов Notify.create({ message: 'Пример' }) будет использовать эти параметры по умолчанию.

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

1. Закрытие уведомлений Метод Notify.create() возвращает объект с функцией dismiss, позволяющей программно закрыть уведомление:

const myNotify = Notify.create({ message: 'Загрузка данных' })
setTimeout(() => {
  myNotify.dismiss()
}, 2000)

2. Очистка всех уведомлений Для удаления всех активных уведомлений используется Notify.clear():

Notify.clear()

3. Подписка на события уведомлений Компонент Notify поддерживает события жизненного цикла:

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

Кастомизация внешнего вида

1. Иконки Можно использовать стандартные Material Icons или собственные SVG:

Notify.create({
  message: 'Сообщение с кастомной иконкой',
  icon: 'mdi-star'
})

2. Стилизация текста и фона Доступны свойства textColor и classes для добавления пользовательских CSS-классов:

Notify.create({
  message: 'Стилизация уведомления',
  color: 'purple',
  textColor: 'yellow',
  classes: 'q-pa-md q-mt-md'
})

3. Анимация появления Quasar поддерживает анимацию уведомлений с помощью свойства transition:

Notify.create({
  message: 'Анимированное уведомление',
  color: 'info',
  position: 'top',
  transition: 'slide'
})

Поддерживаются переходы: fade, slide, jump, scale.

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

Система уведомлений полностью интегрирована с Composition API Vue 3. Пример использования внутри setup-функции:

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

export default {
  setup() {
    const count = ref(0)

    function increment() {
      count.value++
      Notify.create({
        message: `Счетчик увеличен до ${count.value}`,
        color: 'positive'
      })
    }

    return { count, increment }
  }
}

Лучшие практики

  • Для ошибок и критических событий использовать цвета negative или warning.
  • Для успехов и подтверждений действий использовать positive.
  • Для информационных сообщений — info.
  • Не перегружать интерфейс уведомлениями, особенно с длительным временем отображения.
  • Использовать действия (actions) для уведомлений, требующих взаимодействия пользователя.
  • Глобально настраивать параметры уведомлений для единообразия интерфейса.

Эта функциональность позволяет реализовать мощную систему оповещений, интегрированную с Vue-компонентами, с полной кастомизацией внешнего вида, поведения и взаимодействия с пользователем.

Оглавление