Quasar Plugins: Notify, Dialog, Loading, LocalStorage

↑ 5.3 Quasar · ← Предыдущая · → Следующая

Обязательно~3 мин чтенияУровень: middle

Зачем это на собесе

Императивные API Quasar: уведомления, диалоги, лоадеры — как использовать и тестировать.

Объяснение

Плагины включаются в quasar.config → framework.plugins и вызываются через useQuasar() или напрямую.

import { useQuasar, Notify, Dialog, Loading, LocalStorage, SessionStorage, Cookies, Dark, Screen, Meta, copyToClipboard, date } from "quasar";
const $q = useQuasar();
 
$q.notify({ type: "positive", message: "Сохранено", position: "top-right", timeout: 3000, actions: [{ label: "Отмена", handler: undo }] });
 
$q.dialog({ title: "Удалить?", message: "Действие необратимо", cancel: true, persistent: true, ok: { color: "negative", label: "Удалить" } })
  .onOk(() => remove()).onCancel(() => {}).onDismiss(() => {});
// prompt / options: $q.dialog({ prompt: { model: "", type: "text" } }); свой компонент: $q.dialog({ component: MyDialog, componentProps: { id } })
 
$q.loading.show({ message: "Загрузка..." }); $q.loading.hide();               // глобальный лоадер
$q.loadingBar.start(); $q.loadingBar.stop();                                     // полоса сверху (LoadingBar)
 
LocalStorage.set("prefs", { a: 1 }); LocalStorage.getItem("prefs");             // сериализация типов (Date, RegExp и др.)
Cookies.set("k", "v", { expires: 7, secure: true, sameSite: "Lax" });
$q.dark.set("auto"); $q.screen.gt.sm; $q.platform.is.mobile;

Плагин	Назначение
Notify	всплывающие уведомления
Dialog	программные диалоги (alert/confirm/prompt/свой компонент)
Loading, LoadingBar	оверлей и прогресс-бар
LocalStorage, SessionStorage, Cookies	хранилища
Dark, Screen, Platform	тема, размеры экрана, платформа
Meta	управление <title> и meta
AppFullscreen, AddressbarColor, BottomSheet, Bex	прочее

Обёртка над уведомлениями:

export function useNotify() {
  const $q = useQuasar();
  return { ok: (m: string) => $q.notify({ type: "positive", message: m }), fail: (e: unknown) => $q.notify({ type: "negative", message: toMessage(e) }) };
}

Интеграция: глобальный обработчик ошибок HTTP показывает notify; Loading — на долгие операции; Dialog — подтверждения.

Нюансы и подводные камни

• Плагин нужно объявить в конфиге, иначе $q.notify не сработает.
• В тестах плагины нужно подключать (installQuasarPlugin) или мокать useQuasar.
• Не показывайте Loading поверх всего экрана на быстрых операциях (мерцание): используйте задержку.
• Много одновременных уведомлений — группируйте (group).
• LocalStorage плагин безопасен для сериализации, но не для секретов.

Практика

1. Сделайте composable useNotify и подключите к обработчику ошибок API.
2. Реализуйте подтверждение удаления через $q.dialog.
3. Покройте компонент тестом с installQuasarPlugin.

Вопросы с ответами

Как вызвать уведомление в Quasar?

$q.notify({...}) через useQuasar() при включённом плагине Notify.

Чем Dialog плагин отличается от <q-dialog>?

Плагин создаёт диалог императивно из кода, компонент — декларативно в шаблоне.

Связанные темы

• Валидация форм в Quasar
• Темизация: SASS-переменные, brand colors, dark mode