QPopupProxy универсальные попапы

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

<template>
  <q-btn label="Открыть попап" @click="popup = true" />
  <q-popup-proxy v-model="popup" transition-show="scale" transition-hide="scale">
    <q-card>
      <q-card-section>Содержимое попапа</q-card-section>
    </q-card>
  </q-popup-proxy>
</template>

<script>
export default {
  data() {
    return {
      popup: false
    };
  }
};
</script>

В этом примере v-model управляет состоянием видимости, а атрибуты transition-show и transition-hide задают анимацию появления и скрытия попапа.

Привязка к элементу (anchor)

QPopupProxy может позиционироваться относительно любого DOM-элемента с помощью свойства anchor. Это делает его идеальным для создания выпадающих меню и подсказок, которые должны точно следовать за элементом интерфейса.

<q-btn label="Меню" ref="menuBtn" @click="menu = !menu" />
<q-popup-proxy v-model="menu" :anchor="$refs.menuBtn">
  <q-list>
    <q-item clickable v-close-popup>
      <q-item-section>Пункт 1</q-item-section>
    </q-item>
    <q-item clickable v-close-popup>
      <q-item-section>Пункт 2</q-item-section>
    </q-item>
  </q-list>
</q-popup-proxy>

Ключевые моменты:

  • ref элемента позволяет ссылаться на него из anchor.
  • Любые клики по элементам внутри попапа могут автоматически закрывать его с помощью директивы v-close-popup.

Управление положением

QPopupProxy предоставляет широкий набор свойств для точной настройки позиции:

  • self — позиция попапа относительно его якоря (top, bottom, left, right, center).
  • fit — заставляет попап подстраиваться по размеру якоря (например, ширина кнопки).
  • offset — смещение по осям X и Y.
  • cover — делает попап “накрывающим” якорь.
<q-popup-proxy
  v-model="menu"
  :anchor="$refs.menuBtn"
  self="top"
  fit
  :offset="[0, 10]"
>
  <q-card>
    <q-card-section>Подсказка с отступом</q-card-section>
  </q-card>
</q-popup-proxy>

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

Встроенные триггеры и закрытие

QPopupProxy умеет реагировать на стандартные события:

  • click — открытие/закрытие при клике.
  • hover — попап появляется при наведении.
  • contextmenu — открытие по правому клику.

Пример использования hover-триггера:

<q-btn label="Наведи на меня" />
<q-popup-proxy v-model="hoverPopup" anchor="$refs.hoverBtn" transition-show="jump-down" transition-hide="jump-up" target="hover">
  <q-card>
    <q-card-section>Появление при наведении</q-card-section>
  </q-card>
</q-popup-proxy>

Дополнительно можно использовать свойство persistent, чтобы попап не закрывался автоматически при клике вне него, что полезно для модальных форм или настроек.

Адаптация для мобильных устройств

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

  • Автоматически подстраивать ширину и высоту (max-height, max-width).
  • Использовать свойство cover для создания полноэкранных всплывающих элементов.
  • Сохранять плавные анимации с помощью transition-show и transition-hide, даже на touch-устройствах.

Пример полноэкранного модального окна на мобильном:

<q-popup-proxy v-model="mobilePopup" cover transition-show="slide-up" transition-hide="slide-down">
  <q-card class="q-pa-md">
    <q-card-section>Мобильная панель</q-card-section>
    <q-btn label="Закрыть" color="primary" v-close-popup />
  </q-card>
</q-popup-proxy>

Вложенные и динамические попапы

QPopupProxy поддерживает вложенность, что полезно для контекстных меню с подменю:

<q-popup-proxy v-model="parentMenu" anchor="$refs.menuBtn">
  <q-list>
    <q-item clickable @click="childMenu = true">
      <q-item-section>Открыть подменю</q-item-section>
    </q-item>
  </q-list>
</q-popup-proxy>

<q-popup-proxy v-model="childMenu" anchor="$refs.menuBtn" self="right">
  <q-list>
    <q-item clickable v-close-popup>Подпункт 1</q-item>
    <q-item clickable v-close-popup>Подпункт 2</q-item>
  </q-list>
</q-popup-proxy>

Использование реактивных свойств Vue делает возможным динамическое управление содержимым попапа, включая загрузку данных с сервера и рендеринг сложных компонентов внутри.

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

Попапы могут быть полностью стилизованы через CSS-классы и встроенные темы Quasar:

  • class и content-class для обертки попапа.
  • style и content-style для inline-настроек.
  • Поддержка dark/light темы автоматически через q-dark и q-light.
<q-popup-proxy v-model="popup" class="bg-grey-1" content-class="text-blue">
  <q-card>
    <q-card-section>Стилизация попапа</q-card-section>
  </q-card>
</q-popup-proxy>

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

Итоговые возможности QPopupProxy

  • Универсальное позиционирование относительно якоря.
  • Поддержка различных триггеров (click, hover, contextmenu).
  • Полная адаптация для мобильных и десктопных устройств.
  • Возможность вложенных и динамических попапов.
  • Простая интеграция с реактивными свойствами Vue.
  • Гибкая кастомизация внешнего вида и анимаций.

QPopupProxy становится центральным инструментом при проектировании интерактивных и адаптивных интерфейсов, объединяя удобство работы с модальными окнами и контекстными меню в одном компоненте.

Оглавление