Popover

Popover в Element Plus представляет собой всплывающий контейнер, который появляется при взаимодействии с элементом (клик, наведение или фокус). Он используется для отображения дополнительной информации или действий, не загромождая интерфейс. Основные преимущества Popover — гибкость, поддержка сложного контента и интеграция с реактивными данными Vue 3.

В базовом виде Popover подключается через компонент <el-popover>, который содержит слот reference для элемента, запускающего всплывающее окно.

<template>
  <el-popover
    placement="top"
    title="Подсказка"
    width="200"
    trigger="hover">
    <p>Дополнительная информация здесь.</p>
    <template #reference>
      <el-button>Наведи курсор</el-button>
    </template>
  </el-popover>
</template>

Ключевые атрибуты:

  • placement — положение всплывающего окна относительно целевого элемента. Возможные значения: top, bottom, left, right, top-start, bottom-end и т.д.
  • title — заголовок Popover. Может быть пустым или динамическим.
  • width — ширина в пикселях. Можно задавать строкой ("300") или числом (300).
  • trigger — событие, которое активирует Popover: click, hover, focus или manual.

Слоты и динамический контент

Popover поддерживает несколько слотов, позволяющих создавать сложные интерфейсы:

  • default — основной контент Popover. Может содержать текст, формы, таблицы и даже другие компоненты.
  • reference — элемент, при взаимодействии с которым всплывает окно.

Пример использования с интерактивной формой:

<template>
  <el-popover
    placement="right"
    width="300"
    trigger="click">
    <form @submit.prevent="submitForm">
      <el-input v-model="username" placeholder="Имя"></el-input>
      <el-button type="primary" native-type="submit">Отправить</el-button>
    </form>
    <template #reference>
      <el-button>Открыть форму</el-button>
    </template>
  </el-popover>
</template>

<script setup>
import { ref } from 'vue';

const username = ref('');

function submitForm() {
  console.log('Имя:', username.value);
}
</script>

Особенности:

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

Управление видимостью

Атрибут v-model:visible позволяет полностью контролировать состояние Popover программно:

<template>
  <el-popover
    v-model:visible="isVisible"
    placement="bottom"
    title="Управление видимостью"
    width="250">
    Контент управляется через переменную isVisible
    <template #reference>
      <el-button @click="togglePopover">Показать / Скрыть</el-button>
    </template>
  </el-popover>
</template>

<script setup>
import { ref } from 'vue';

const isVisible = ref(false);

function togglePopover() {
  isVisible.value = !isVisible.value;
}
</script>

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

Расширенные возможности

  1. Адаптивное позиционирование: Popover автоматически меняет позицию при нехватке места в окне. Атрибут fallback-placements задаёт список альтернативных позиций.
<el-popover
  placement="top"
  :fallback-placements="['bottom', 'right']"
  trigger="hover">
  Контент с адаптивным позиционированием
  <template #reference>
    <el-button>Наведи меня</el-button>
  </template>
</el-popover>
  1. Прокрутка и размеры: Если содержимое слишком большое, Popover автоматически добавляет прокрутку. Можно ограничить максимальную высоту через CSS:
.el-popover__reference + .el-popover .el-popover__content {
  max-height: 300px;
  overflow-y: auto;
}

  1. Интеграция с другими элементами Element Plus: Popover удобно комбинировать с компонентами el-button, el-icon, el-input, el-select для создания интерактивных панелей и подсказок.

  2. Триггер manual: Полный контроль над появлением Popover, полезно при сложных пользовательских сценариях, например при анимации или асинхронной загрузке данных.

<el-popover
  trigger="manual"
  v-model:visible="isManualVisible">
  Асинхронный контент
  <template #reference>
    <el-button @click="loadData">Загрузить</el-button>
  </template>
</el-popover>

<script setup>
import { ref } from 'vue';

const isManualVisible = ref(false);

function loadData() {
  fetch('/api/data')
    .then(res => res.json())
    .then(() => isManualVisible.value = true);
}
</script>

Анимация и стили

Popover по умолчанию использует стандартные анимации Element Plus, но их можно переопределять через popper-class и CSS переменные:

<el-popover
  popper-class="custom-popover"
  placement="bottom"
  trigger="hover">
  Стилизованный Popover
  <template #reference>
    <el-button>Наведи курсор</el-button>
  </template>
</el-popover>
.custom-popover {
  border-radius: 8px;
  background-color: #f0f9ff;
  color: #1f2d3d;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

Попап с динамическим контентом и реактивностью

Popover полностью поддерживает реактивные данные Vue, что позволяет обновлять контент без закрытия окна:

<el-popover
  placement="top"
  v-model:visible="visible"
  trigger="click">
  <p>Текущее время: {{ currentTime }}</p>
  <template #reference>
    <el-button @click="updateTime">Обновить время</el-button>
  </template>
</el-popover>

<script setup>
import { ref } from 'vue';

const visible = ref(false);
const currentTime = ref(new Date().toLocaleTimeString());

function updateTime() {
  currentTime.value = new Date().toLocaleTimeString();
  visible.value = true;
}
</script>

Таким образом, Popover в Element Plus сочетает гибкость, удобство интеграции с Vue 3 и возможность создания интерактивного, адаптивного интерфейса. Его функционал охватывает простые подсказки, сложные формы, динамические панели и программное управление видимостью, что делает компонент незаменимым инструментом при разработке современных приложений.

Оглавление