Интеграция с Vue.js

Для использования Toastify в проекте на Vue.js необходимо сначала установить библиотеку через npm:

npm install toastify-js

После установки можно подключить Toastify в компонент Vue.js. Наиболее удобный способ — импортировать библиотеку в нужный компонент:

import Toastify from "toastify-js";
import "toastify-js/src/toastify.css";

Импорт CSS обязателен, так как без него уведомления будут отображаться без стилей.

Создание базового уведомления

Базовый синтаксис вызова Toastify выглядит следующим образом:

Toastify({
  text: "Пример уведомления",
  duration: 3000,
  close: true,
  gravity: "top",
  position: "right",
  backgroundColor: "#4CAF50"
}).showToast();

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

  • text — текст уведомления.
  • duration — время отображения в миллисекундах. Установите -1, чтобы уведомление оставалось до закрытия пользователем.
  • close — отображение кнопки закрытия.
  • gravity — расположение по вертикали ("top" или "bottom").
  • position — расположение по горизонтали ("left", "center", "right").
  • backgroundColor — цвет фона уведомления.

Интеграция в методы Vue.js

Уведомления удобно вызывать внутри методов компонента Vue.js:

export default {
  name: "NotificationExample",
  methods: {
    showSuccess() {
      Toastify({
        text: "Операция успешно выполнена",
        duration: 4000,
        gravity: "top",
        position: "right",
        backgroundColor: "#4CAF50",
        close: true
      }).showToast();
    },
    showError() {
      Toastify({
        text: "Произошла ошибка",
        duration: 4000,
        gravity: "top",
        position: "right",
        backgroundColor: "#F44336",
        close: true
      }).showToast();
    }
  }
}

Методы showSuccess и showError могут быть привязаны к событиям компонентов, например, к кликам кнопок.

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

Toastify можно интегрировать с реактивными переменными Vue.js. Например, при изменении состояния приложения можно автоматически показывать уведомления:

export default {
  data() {
    return {
      statusMessage: "",
      isError: false
    };
  },
  watch: {
    statusMessage(newMessage) {
      if (newMessage) {
        Toastify({
          text: newMessage,
          duration: 3000,
          gravity: "top",
          position: "right",
          backgroundColor: this.isError ? "#F44336" : "#4CAF50",
          close: true
        }).showToast();
      }
    }
  }
};

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

Помимо стандартных параметров, Toastify позволяет полностью кастомизировать уведомления через className и style:

Toastify({
  text: "Пользовательский стиль уведомления",
  duration: 5000,
  gravity: "top",
  position: "right",
  close: true,
  className: "custom-toast",
  style: {
    background: "linear-gradient(to right, #00b09b, #96c93d)",
    color: "#ffffff",
    fontWeight: "bold",
    borderRadius: "8px",
    padding: "10px 20px"
  }
}).showToast();

В проекте Vue.js можно определить глобальные стили для уведомлений через CSS:

.custom-toast {
  font-family: 'Arial', sans-serif;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  border-left: 4px solid #ffffff;
}

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

Для централизованного управления уведомлениями часто используют Vuex. Создается модуль notifications, который управляет состоянием сообщений:

// store/modules/notifications.js
export default {
  namespaced: true,
  state: {
    message: "",
    type: "success"
  },
  mutations: {
    setNotification(state, payload) {
      state.message = payload.message;
      state.type = payload.type;
    }
  },
  actions: {
    notify({ commit }, payload) {
      commit("setNotification", payload);
    }
  }
};

В компоненте подписываются на изменения состояния:

computed: {
  notification() {
    return this.$store.state.notifications;
  }
},
watch: {
  notification(newVal) {
    if (newVal.message) {
      Toastify({
        text: newVal.message,
        duration: 3000,
        backgroundColor: newVal.type === "error" ? "#F44336" : "#4CAF50",
        close: true,
        gravity: "top",
        position: "right"
      }).showToast();
    }
  }
}

Глобальный плагин Vue.js для Toastify

Для упрощения вызова уведомлений можно создать плагин Vue.js:

// plugins/toastify.js
import Toastify from "toastify-js";
import "toastify-js/src/toastify.css";

export default {
  install(app) {
    app.config.globalProperties.$toast = (message, options = {}) => {
      Toastify({
        text: message,
        duration: options.duration || 3000,
        gravity: options.gravity || "top",
        position: options.position || "right",
        backgroundColor: options.backgroundColor || "#4CAF50",
        close: options.close !== undefined ? options.close : true,
        className: options.className || "",
        style: options.style || {}
      }).showToast();
    };
  }
};

После регистрации плагина в основном файле приложения:

import { createApp } from "vue";
import App from "./App.vue";
import ToastifyPlugin from "./plugins/toastify";

const app = createApp(App);
app.use(ToastifyPlugin);
app.mount("#app");

Уведомления можно вызывать из любого компонента через $toast:

this.$toast("Сообщение от глобального плагина", { backgroundColor: "#2196F3" });

Анимации и события

Toastify поддерживает коллбеки onClick и callback для интерактивных уведомлений:

Toastify({
  text: "Нажмите для действия",
  duration: 4000,
  gravity: "top",
  position: "right",
  close: true,
  onClick: () => {
    console.log("Уведомление было кликнуто");
  }
}).showToast();

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

Оглавление