Popover (всплывающее окно)

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

Всплывающее окно

<template>
  <div class="demo-col" style="padding: 40px 0">
    <div class="demo-row" style="gap: 24px; flex-wrap: wrap; justify-content: center">
      <LhPopover title="Заголовок" content="Срабатывание по click (по умолчанию)" placement="top">
        <LhButton>click сверху</LhButton>
      </LhPopover>
      <LhPopover content="Срабатывание по click" placement="right" trigger="click">
        <LhButton>click справа</LhButton>
      </LhPopover>
      <LhPopover content="Срабатывание по focus" placement="bottom" trigger="focus">
        <LhButton>focus снизу</LhButton>
      </LhPopover>
      <LhPopover content="Без стрелки + своя ширина" placement="left" :arrow="false" :width="240">
        <LhButton>Без стрелки слева</LhButton>
      </LhPopover>
      <LhPopover content="Строгое позиционирование по left" placement="left" :flip="false">
        <LhButton>flip=false</LhButton>
      </LhPopover>
    </div>
    <p class="demo-note">Срабатывание manual с ручным управлением через :visible.sync; disabled отключает появление; popperClass — пользовательский класс.</p>
    <div class="demo-row" style="gap: 24px; flex-wrap: wrap; justify-content: center">
      <LhPopover :visible.sync="manual" content="Управляется переключателем" placement="top" trigger="manual">
        <LhButton @click="manual = !manual">manual переключатель ({{ manual ? 'вкл' : 'выкл' }})</LhButton>
      </LhPopover>
      <LhPopover content="Отключённое состояние" disabled>
        <LhButton disabled>disabled</LhButton>
      </LhPopover>
      <LhPopover content="Задержка показа/скрытия" placement="top" :show-after="300" :hide-after="500">
        <LhButton>showAfter/hideAfter</LhButton>
      </LhPopover>
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({
    manual: false,
  }),
}
</script>

Props

Проп	Описание	Тип	По умолчанию
placement	Позиция показа	'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'	'top'
flip	Разворот при нехватке пространства вдоль главной оси (включён по умолчанию); при false окно позиционируется строго по placement, даже с выходом за пределы viewport	boolean	true
trigger	Способ срабатывания	'click' \| 'hover' \| 'focus' \| 'manual'	'hover'
title	Заголовок	string	—
visible	Видимость под ручным управлением (:visible.sync)	boolean	—
disabled	Отключение	boolean	false
arrow	Показывать ли стрелку	boolean	true
width	Ширина всплывающего слоя	string \| number	—
popperClass	Пользовательский класс всплывающего слоя	string	—
teleportTarget	Целевой элемент монтирования всплывающего слоя (селектор или элемент, по умолчанию body; в Vue 2.7 нет Teleport — реализован перенос хоста)	string \| HTMLElement	—
showAfter	Задержка показа (мс)	number	—
hideAfter	Задержка скрытия (мс)	number	—
themeVars	Переменные темы на уровне компонента, переопределяют конфигурацию ConfigProvider	Record<string, string>	—
bgPattern	Фоновый узор на уровне компонента, переопределяет конфигурацию ConfigProvider	string	—
sx	Проп sx для быстрого макета (применяется к корневому элементу триггера)	—	—

Slots

Слот	Описание
default	Триггер
title	Зона заголовка (по умолчанию берётся проп title)
content	Основной текст всплывающего окна (если не передан, берётся проп content)