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

Featherlight — легковесная библиотека для создания модальных окон, которая идеально подходит для интеграции с Vue благодаря своей простоте и гибкости. Для использования библиотеки в Vue сначала необходимо подключить CSS и JS-файлы Featherlight. Это можно сделать через пакетный менеджер npm:

npm install featherlight

Затем в основном файле приложения или в компоненте необходимо импортировать стили и скрипт:

import 'featherlight/dist/featherlight.min.css';
import 'featherlight';

После этого библиотека готова к использованию в рамках компонентов Vue.

Использование с шаблонами Vue

Featherlight работает через атрибуты data-featherlight на элементах DOM. В Vue это реализуется через стандартные директивы и обработчики событий. Например, для открытия модального окна с содержимым из другого элемента:

<template>
  <div>
    <button @click="openModal">Открыть окно</button>

    <div id="modal-content" style="display: none;">
      <h2>Заголовок модального окна</h2>
      <p>Содержимое окна.</p>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    openModal() {
      $.featherlight('#modal-content');
    }
  }
}
</script>

Важный момент: Featherlight оперирует с реальными DOM-элементами, поэтому элементы, передаваемые в модальное окно, должны существовать в DOM на момент вызова.

Динамическое содержимое модального окна

Featherlight поддерживает динамическое создание контента, что удобно для Vue, где данные часто приходят асинхронно. Можно передавать HTML-строку или даже компонент Vue через render-функцию. Простейший вариант с динамическим HTML:

methods: {
  openDynamicModal(content) {
    $.featherlight(`<div><h3>Динамический заголовок</h3><p>${content}</p></div>`);
  }
}

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

import { createApp } from 'vue';
import MyModalComponent from './MyModalComponent.vue';

methods: {
  openComponentModal() {
    const container = document.createElement('div');
    createApp(MyModalComponent).mount(container);
    $.featherlight(container);
  }
}

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

Настройка опций Featherlight

Featherlight предоставляет обширный набор опций для управления поведением модальных окон. Основные из них:

  • variant — позволяет добавлять CSS-классы к окну для кастомизации.
  • closeIcon — задает иконку или текст кнопки закрытия.
  • persist — при значении true окно не удаляется из DOM после закрытия, что полезно для повторного использования.
  • afterOpen, beforeClose, afterClose — колбэки, которые вызываются на соответствующих стадиях жизненного цикла окна.

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

methods: {
  openCustomModal() {
    $.featherlight('#modal-content', {
      variant: 'custom-style',
      closeIcon: '&#10005;',
      persist: true,
      afterOpen: function() {
        console.log('Модальное окно открыто');
      }
    });
  }
}

Взаимодействие с реактивными данными Vue

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

<template>
  <div>
    <button @click="showModal = true">Открыть окно</button>
    <div v-if="showModal" id="modal-content" style="display: none;">
      <p>{{ message }}</p>
      <button @click="showModal = false">Закрыть</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: false,
      message: 'Привет из Vue!'
    };
  },
  watch: {
    showModal(val) {
      if (val) {
        $.featherlight('#modal-content');
      }
    }
  }
}
</script>

Таким образом, можно использовать реактивные данные Vue совместно с модальными окнами Featherlight без потери синхронизации состояния.

Стилизация и кастомизация

Featherlight предоставляет минимальный базовый CSS, что позволяет легко добавлять собственные стили. Через опцию variant можно назначать класс, который расширяет стили:

.featherlight.custom-style {
  background-color: #f0f0f0;
  border-radius: 12px;
  padding: 20px;
  max-width: 500px;
}

Стили можно делать динамическими, изменяя класс через методы Vue в зависимости от состояния приложения.

Работа с изображениями и AJAX-контентом

Featherlight поддерживает загрузку изображений и AJAX-контента напрямую:

methods: {
  openImageModal() {
    $.featherlight('path/to/image.jpg');
  },
  openAjaxModal() {
    $.featherlight({
      ajax: '/api/modal-content',
      afterContent: function() {
        console.log('Контент загружен');
      }
    });
  }
}

Для Vue это удобно при необходимости динамически загружать данные с сервера и отображать их в модальном окне без дополнительного ручного управления DOM.

Управление жизненным циклом модального окна

Featherlight предоставляет события и методы для полного контроля модального окна:

  • $.featherlight.current() — возвращает текущий экземпляр открытого окна.
  • close() — метод экземпляра для программного закрытия.
  • Колбэки: beforeOpen, afterOpen, beforeClose, afterClose.

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

methods: {
  closeModal() {
    const fl = $.featherlight.current();
    if (fl) fl.close();
  }
}

Это позволяет синхронизировать состояние окна с реактивной логикой приложения.

Оглавление