Instance методы

Для работы с Popper.js первым шагом является создание экземпляра через конструктор Popper.createPopper(reference, popper, options). Здесь:

  • reference — элемент, к которому будет привязан Popper.
  • popper — сам всплывающий элемент.
  • options — объект с настройками позиционирования.

Пример создания:

const popperInstance = Popper.createPopper(referenceElement, popperElement, {
  placement: 'bottom',
  modifiers: [
    { name: 'offset', options: { offset: [0, 8] } }
  ],
});

Ключевой момент: экземпляр Popper хранит внутреннее состояние и отвечает за динамическое управление позицией всплывающего элемента.

Методы экземпляра

update()

Метод update() пересчитывает позицию Popper относительно reference. Возвращает Promise, который выполняется после завершения обновления позиции.

popperInstance.update().then(() => {
  console.log('Позиция Popper обновлена');
});
  • Используется при динамическом изменении размера reference или popper.
  • Полезно для анимаций и интерактивных интерфейсов.

setOptions(options)

Позволяет обновлять конфигурацию существующего экземпляра без пересоздания.

popperInstance.setOptions({
  placement: 'top',
  modifiers: [
    { name: 'flip', options: { fallbackPlacements: ['right', 'left'] } }
  ]
}).then(() => {
  console.log('Опции Popper обновлены');
});
  • Может менять placement, modifiers и другие настройки.
  • После вызова setOptions() Popper автоматически обновляет позицию.

destroy()

Метод destroy() полностью удаляет экземпляр Popper и снимает все слушатели событий.

popperInstance.destroy();
  • После вызова destroy() объект экземпляра больше нельзя использовать.
  • Освобождает ресурсы и предотвращает утечки памяти.
  • Не оставляет следов в DOM, но не удаляет сам popper-элемент.

forceUpdate()

Метод forceUpdate() синхронно пересчитывает и применяет новую позицию Popper.

popperInstance.forceUpdate();
  • В отличие от update(), работает сразу, без Promise.
  • Используется для мгновенной корректировки позиции, когда необходима немедленная реакция на изменения DOM.

Важные особенности методов

  1. Асинхронность vs Синхронность

    • update() и setOptions() возвращают Promise — позиция рассчитывается после завершения всех модификаторов.
    • forceUpdate() выполняется мгновенно, что полезно при срочных обновлениях.

  2. Модификаторы и их влияние Любые изменения в модификаторах через setOptions() влияют на поведение Popper при следующем обновлении. Например, включение flip изменяет стратегию позиционирования при нехватке места.

  3. Совместимость с динамическим DOM Методы экземпляра автоматически учитывают перемещение или изменение размеров reference и popper, если задействованы соответствующие модификаторы (preventOverflow, flip, offset).

  4. Управление жизненным циклом

    • Создание: createPopper()
    • Обновление: update() / forceUpdate()
    • Изменение опций: setOptions()
    • Уничтожение: destroy()

Это позволяет гибко интегрировать Popper в любые интерфейсы, поддерживая корректное позиционирование и экономию ресурсов.

Примеры комбинирования методов

const popperInstance = Popper.createPopper(referenceElement, popperElement, {
  placement: 'bottom',
  modifiers: [{ name: 'offset', options: { offset: [0, 10] } }]
});

// Изменение позиции по событию
button.addEventListener('click', () => {
  popperInstance.setOptions({ placement: 'top' }).then(() => {
    console.log('Popper перемещен наверх');
  });
});

// Немедленное обновление при изменении размеров окна
window.addEventListener('resize', () => {
  popperInstance.forceUpdate();
});

// Очистка после закрытия модального окна
closeButton.addEventListener('click', () => {
  popperInstance.destroy();
});

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

Оглавление