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

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

Tingle.js — это лёгкая и гибкая JavaScript-библиотека для создания модальных окон, предоставляющая широкие возможности кастомизации. Она позволяет быстро и удобно создавать модальные окна с различными эффектами и анимациями. В своей работе tingle.js можно интегрировать с популярными фреймворками и библиотеками, такими как Vue.js, для облегчения взаимодействия с компонентами интерфейса и создания более сложных приложений.

Перед тем как интегрировать tingle.js с Vue.js, необходимо установить саму библиотеку. Для этого можно использовать менеджеры пакетов, такие как npm или yarn.

Для установки с помощью npm:

npm install tingle.js --save

Или через yarn:

yarn add tingle.js

После установки библиотеки необходимо импортировать её в проект.

import Tingle from 'tingle.js';
import 'tingle.js/dist/tingle.min.css';

Создание компонента модального окна

Интеграция tingle.js с Vue.js требует создания Vue-компонента, который будет взаимодействовать с библиотекой для отображения и управления модальными окнами. Ниже приведён пример компонента модального окна.

<template>
  <div v-if="isOpen" class="modal-container">
    <div ref="modal"></div>
  </div>
</template>

<script>
import Tingle from 'tingle.js';
import 'tingle.js/dist/tingle.min.css';

export default {
  data() {
    return {
      modal: null,
      isOpen: false,
    };
  },
  methods: {
    openModal() {
      if (!this.modal) {
        this.initModal();
      }
      this.modal.open();
      this.isOpen = true;
    },
    closeModal() {
      if (this.modal) {
        this.modal.close();
      }
      this.isOpen = false;
    },
    initModal() {
      this.modal = new Tingle();
      this.modal.setContent('<h1>Модальное окно</h1><p>Это пример модального окна, созданного с использованием tingle.js и Vue.js.</p>');
      this.modal.addFooterBtn('Закрыть', 'tingle-btn tingle-btn--primary', () => {
        this.closeModal();
      });
      this.modal.open();
    },
  },
  destroyed() {
    if (this.modal) {
      this.modal.destroy();
    }
  },
};
</script>

<style scoped>
.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

Объяснение работы компонента

  1. Шаблон компонента: В шаблоне компонента используется условный рендеринг с помощью v-if для отображения контейнера модального окна. Контейнер содержит элемент div, на который ссылается через ref="modal" для последующего связывания с экземпляром tingle.js.

  2. Методы:

    • openModal: Этот метод используется для открытия модального окна. При его вызове проверяется, был ли ранее инициализирован объект модального окна. Если нет — вызывается метод initModal, который инициализирует экземпляр tingle.js и задаёт его параметры.
    • closeModal: Закрывает модальное окно и изменяет состояние isOpen, которое управляет отображением модального окна.
    • initModal: Создаёт новый экземпляр tingle.js и настраивает его содержимое, включая кнопки и заголовок.

  3. Жизненный цикл компонента: В методе destroyed происходит уничтожение модального окна, если оно было инициализировано. Это предотвращает утечки памяти и обеспечит корректную работу приложения при повторном использовании компонента.

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

Чтобы использовать модальное окно в другом компоненте, можно просто импортировать компонент и вызвать метод openModal для отображения окна.

<template>
  <div>
    <button @click="showModal">Показать модальное окно</button>
    <ModalWindow ref="modalWindow" />
  </div>
</template>

<script>
import ModalWindow from './ModalWindow.vue';

export default {
  components: {
    ModalWindow,
  },
  methods: {
    showModal() {
      this.$refs.modalWindow.openModal();
    },
  },
};
</script>

Дополнительные настройки

tinngle.js позволяет настраивать модальные окна в соответствии с требованиями. Можно добавлять анимации, изменять размеры, стили и поведение. Некоторые из часто используемых опций:

  • Размер окна: tingle.js позволяет изменять размер модального окна с помощью методов setMaxHeight и setMaxWidth, чтобы установить максимальные размеры, или через CSS для кастомизации внешнего вида.

  • Анимации: Библиотека поддерживает анимации при открытии и закрытии окон. Эти анимации можно активировать через соответствующие параметры конфигурации.

this.modal.setOptions({
  closeLabel: 'Закрыть',
  closeMethods: ['click', 'button', 'escape'],
  animate: true,
});

Обработка событий

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

  • open: Срабатывает при открытии модального окна.
  • close: Срабатывает при закрытии модального окна.
  • destroy: Срабатывает при уничтожении окна.

Эти события можно обрабатывать с помощью методов Vue:

this.modal.on('open', () => {
  console.log('Модальное окно открыто');
});

this.modal.on('close', () => {
  console.log('Модальное окно закрыто');
});

Совмещение с Vue Router

Если в проекте используется Vue Router, модальные окна tingle.js можно интегрировать с маршрутизацией. Для этого необходимо использовать динамическое добавление модальных окон в зависимости от текущего маршрута. Например, можно создать маршруты, которые будут отображать модальные окна при переходе.

const routes = [
  {
    path: '/modal',
    component: ModalWindow,
    beforeEnter: (to, from, next) => {
      const modal = new Tingle();
      modal.setContent('<h1>Модальное окно для маршрута</h1>');
      modal.open();
      next();
    },
  },
];

Заключение

Интеграция tingle.js с Vue.js — это мощный способ создания гибких и красивых модальных окон, которые могут быть настроены для работы с различными компонентами и логикой приложения. Благодаря простоте использования и возможности настройки tingle.js является отличным выбором для создания всплывающих окон в приложениях, построенных на Vue.js.

Оглавление