Vue-плагин для iziToast

Для интеграции iziToast в проект на Vue необходимо использовать официальный Vue-плагин. Установка осуществляется через npm или yarn:

npm install izitoast vue-izitoast
# или
yarn add izitoast vue-izitoast

После установки подключение плагина происходит в основном файле приложения, обычно main.js или main.ts:

import { createApp } from 'vue';
import App from './App.vue';
import VueIziToast from 'vue-izitoast';
import 'izitoast/dist/css/iziToast.min.css';

const app = createApp(App);

app.use(VueIziToast, {
  position: 'topRight',
  timeout: 5000,
  theme: 'light'
});

app.mount('#app');

Здесь position, timeout и theme — глобальные настройки уведомлений, которые применяются ко всем всплывающим сообщениям по умолчанию.

Основные методы Vue-плагина

После подключения iziToast через Vue-плагин, во всех компонентах доступен объект $izitoast. Он предоставляет следующие ключевые методы:

  • $izitoast.success(options) — уведомление об успешном действии.
  • $izitoast.error(options) — уведомление об ошибке.
  • $izitoast.warning(options) — предупреждающее уведомление.
  • $izitoast.info(options) — информационное уведомление.
  • $izitoast.show(options) — универсальный метод для всех типов уведомлений с кастомными параметрами.

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

export default {
  methods: {
    notifySuccess() {
      this.$izitoast.success({
        title: 'Успех',
        message: 'Данные успешно сохранены',
        timeout: 3000,
        position: 'bottomLeft'
      });
    },
    notifyError() {
      this.$izitoast.error({
        title: 'Ошибка',
        message: 'Произошла ошибка при сохранении',
        timeout: 4000
      });
    }
  }
}

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

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

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

  • position — расположение уведомления (topRight, topLeft, bottomRight, bottomLeft, topCenter, bottomCenter).
  • timeout — длительность отображения уведомления в миллисекундах.
  • theme — тема (light или dark).
  • transitionIn / transitionOut — анимации появления и скрытия (fadeIn, fadeOut, slideInLeft, bounceIn, и т.д.).
  • close — наличие кнопки закрытия.

Пример глобальной конфигурации с анимацией:

app.use(VueIziToast, {
  position: 'topRight',
  timeout: 5000,
  theme: 'dark',
  transitionIn: 'bounceInRight',
  transitionOut: 'fadeOut'
});

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

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

  • title — заголовок.
  • message — текст сообщения.
  • icon — кастомная иконка ('fa fa-check', 'fa fa-times').
  • backgroundColor — цвет фона.
  • color — цвет текста.
  • position — переопределяет глобальное расположение.
  • timeout — переопределяет глобальное время показа.
  • overlay — затемнение фона под уведомлением (true/false).
  • buttons — добавление кнопок действия с callback-функциями.

Пример уведомления с кнопкой:

this.$izitoast.show({
  title: 'Подтверждение',
  message: 'Вы действительно хотите удалить элемент?',
  timeout: false,
  buttons: [
    ['<button>Удалить</button>', (instance, toast) => { 
        console.log('Элемент удалён'); 
        instance.hide({ transitionOut: 'fadeOut' }, toast, 'button'); 
    }, true],
    ['<button>Отмена</button>', (instance, toast) => { 
        instance.hide({ transitionOut: 'fadeOut' }, toast, 'button'); 
    }]
  ]
});

Работа с событиями

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

  • onOpening — при начале показа уведомления.
  • onOpened — после завершения анимации появления.
  • onClosing — при начале скрытия.
  • onClosed — после завершения скрытия.

Пример с обработкой события закрытия:

this.$izitoast.info({
  title: 'Информация',
  message: 'Эта подсказка закроется через 3 секунды',
  onClosed: () => {
    console.log('Уведомление закрыто');
  }
});

Локальные уведомления в компонентах

VueIziToast позволяет создавать уведомления локально внутри компонента без зависимости от глобальных настроек. Для этого можно импортировать iziToast напрямую:

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

iziToast.success({
  title: 'Локальное уведомление',
  message: 'Отображается только внутри этого компонента',
  position: 'bottomRight'
});

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

Совмещение с Vuex и Composition API

Для проектов на Vue 3 с Composition API уведомления могут быть интегрированы через setup:

import { getCurrentInstance } from 'vue';

export default {
  setup() {
    const { proxy } = getCurrentInstance();

    const notify = () => {
      proxy.$izitoast.success({
        title: 'Готово',
        message: 'Операция выполнена через Composition API'
      });
    };

    return { notify };
  }
}

При использовании Vuex уведомления удобно вызывать в экшенах или мутациях, передавая доступ к $izitoast через контекст компонента.

Если хочешь, я могу подготовить дополнительный раздел с примерами сложных кастомных уведомлений с кнопками, прогресс-барами и интерактивными элементами для Vue-плагина iziToast. Это будет прямо учебник на продвинутом уровне.

Хочешь, чтобы я это сделал?

Оглавление