Использование с Vue.js

Для использования iziToast в Vue.js сначала необходимо подключить библиотеку. Это можно сделать через CDN или через npm/yarn.

Через npm:

npm install izitoast

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

import iziToast from 'izitoast';
import 'izitoast/dist/css/iziToast.min.css';

Вариант подключения через CDN в index.html:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/izitoast/dist/css/iziToast.min.css">
<script src="https://cdn.jsdelivr.net/npm/izitoast/dist/js/iziToast.min.js"></script>

Создание глобального метода уведомлений

Для упрощения вызова уведомлений удобно создать глобальный метод, доступный во всех компонентах Vue.

// plugins/iziToast.js
import iziToast from 'izitoast';
import 'izitoast/dist/css/iziToast.min.css';

export default {
  install(app) {
    app.config.globalProperties.$toast = {
      success(message, title = 'Успех') {
        iziToast.success({
          title,
          message,
          position: 'topRight'
        });
      },
      error(message, title = 'Ошибка') {
        iziToast.error({
          title,
          message,
          position: 'topRight'
        });
      },
      info(message, title = 'Информация') {
        iziToast.info({
          title,
          message,
          position: 'topRight'
        });
      },
      warning(message, title = 'Внимание') {
        iziToast.warning({
          title,
          message,
          position: 'topRight'
        });
      }
    };
  }
};

Регистрация плагина в main.js:

import { createApp } from 'vue';
import App from './App.vue';
import iziToastPlugin from './plugins/iziToast';

const app = createApp(App);
app.use(iziToastPlugin);
app.mount('#app');

Теперь $toast доступен во всех компонентах через this.$toast.

Использование iziToast в компонентах

Пример вызова уведомления при успешной операции:

export default {
  methods: {
    saveData() {
      // Логика сохранения данных
      this.$toast.success('Данные успешно сохранены');
    }
  }
};

Для ошибок:

this.$toast.error('Не удалось сохранить данные');

Можно комбинировать с асинхронными функциями:

async fetchData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    this.$toast.success('Данные загружены');
  } catch (error) {
    this.$toast.error('Ошибка загрузки данных');
  }
}

Настройка глобальных опций iziToast

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

iziToast.settings({
  timeout: 5000,
  close: true,
  position: 'topRight',
  transitionIn: 'fadeInDown',
  transitionOut: 'fadeOutUp',
  progressBarColor: '#4caf50',
});

Эти настройки применяются ко всем уведомлениям, если не переопределяются при вызове конкретного метода.

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

Если приложение использует Vuex, уведомления удобно запускать через действия или мутации:

// store/index.js
actions: {
  async saveItem({ commit }, item) {
    try {
      await api.saveItem(item);
      commit('ADD_ITEM', item);
      iziToast.success({ message: 'Элемент сохранён' });
    } catch (error) {
      iziToast.error({ message: 'Ошибка сохранения элемента' });
    }
  }
}

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

Кастомизация уведомлений

iziToast позволяет полностью изменять внешний вид и поведение уведомлений:

  • position: topRight, topLeft, bottomRight, bottomLeft, center
  • timeout: время отображения в миллисекундах
  • close: отображение кнопки закрытия
  • overlay: затемнение фона
  • icon: установка иконки
  • theme: light или dark
  • zindex: настройка слоя отображения поверх других элементов

Пример кастомного уведомления:

this.$toast.info('Новые сообщения', 'Уведомление', {
  timeout: 8000,
  position: 'bottomLeft',
  theme: 'dark',
  overlay: true,
  icon: 'icon-message'
});

Асинхронные уведомления с обратным вызовом

iziToast поддерживает колбэки при открытии, закрытии и кликах:

this.$toast.success('Задача выполнена', 'Готово', {
  onOpening: () => console.log('Уведомление открывается'),
  onClosing: () => console.log('Уведомление закрывается'),
  onClick: () => console.log('Клик по уведомлению')
});

Это позволяет интегрировать уведомления с динамическими действиями и логикой интерфейса.

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

В Vue 3 с Composition API уведомления можно использовать через getCurrentInstance:

import { getCurrentInstance } from 'vue';

export default {
  setup() {
    const { appContext } = getCurrentInstance();
    const toast = appContext.config.globalProperties.$toast;

    const notify = () => {
      toast.success('Операция выполнена');
    };

    return { notify };
  }
};

Такой подход позволяет работать с iziToast без использования this, полностью в духе Composition API.

Взаимодействие с формами

iziToast часто используется для уведомлений о результатах отправки форм. Пример:

async submitForm(formData) {
  try {
    await api.submitForm(formData);
    this.$toast.success('Форма отправлена успешно');
  } catch (error) {
    this.$toast.error('Ошибка при отправке формы');
  }
}

Можно добавлять проверки на пустые поля или ошибки валидации, выводя соответствующие уведомления.

Группировка уведомлений

Для крупных приложений полезно задавать разные позиции для разных типов уведомлений:

iziToast.settings({
  success: { position: 'topRight' },
  error: { position: 'topLeft' },
  info: { position: 'bottomRight' },
  warning: { position: 'bottomLeft' },
});

Это позволяет визуально разграничивать сообщения по категориям и улучшает UX.

Оглавление