Popconfirm (всплывающее подтверждение)

Лёгкое подтверждающее действие: рядом с триггером всплывает окно подтверждения, не требующее открытия диалога. Семантика — блокирующее подтверждение (role="alertdialog"): при открытии фокус попадает на кнопку подтверждения, Tab циклически перемещается между двумя кнопками, Escape трактуется как отмена.

Базовое использование

Подтверждение удаления

<template>
  <LhPopconfirm title="Удалить эту запись?" @confirm="onConfirm" @cancel="onCancel">
    <LhButton type="danger">Удалить</LhButton>
  </LhPopconfirm>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const action = ref('')
function onConfirm() {
  action.value = 'Подтверждено'
}
function onCancel() {
  action.value = 'Отменено'
}
const pcVisible = ref(false)
</script>

<script>
export default {
  data() {
    return { action: '', pcVisible: false }
  },
  methods: {
    onConfirm() {
      this.action = 'Подтверждено'
    },
    onCancel() {
      this.action = 'Отменено'
    },
  },
}
</script>

<template>
  <LhPopconfirm title="Удалить эту запись?" @confirm="onConfirm" @cancel="onCancel">
    <LhButton type="danger">Удалить</LhButton>
  </LhPopconfirm>
</template>

Три тональности

info / warning / danger

<script setup lang="ts">
</script>

<template>
  <!-- Информационная тональность -->
  <LhPopconfirm type="info" title="Посмотреть журнал доступа к этой записи?">
    <LhButton>Информация</LhButton>
  </LhPopconfirm>
  <!-- Предупреждающая тональность -->
  <LhPopconfirm type="warning" title="Это действие уведомит всех участников.">
    <LhButton type="warning">Предупреждение</LhButton>
  </LhPopconfirm>
  <!-- Опасная тональность -->
  <LhPopconfirm type="danger" title="После удаления восстановление невозможно.">
    <LhButton type="danger">Опасность</LhButton>
  </LhPopconfirm>
</template>

<script>
export default {}
</script>

<template>
  <!-- Информационная тональность -->
  <LhPopconfirm type="info" title="Посмотреть журнал доступа к этой записи?">
    <LhButton>Информация</LhButton>
  </LhPopconfirm>
  <!-- Предупреждающая тональность -->
  <LhPopconfirm type="warning" title="Это действие уведомит всех участников.">
    <LhButton type="warning">Предупреждение</LhButton>
  </LhPopconfirm>
  <!-- Опасная тональность -->
  <LhPopconfirm type="danger" title="После удаления восстановление невозможно.">
    <LhButton type="danger">Опасность</LhButton>
  </LhPopconfirm>
</template>

Пользовательский текст и сторона

Текст / сторона / способ вызова

<script setup lang="ts">
</script>

<template>
  <!-- Пользовательский текст и сторона -->
  <LhPopconfirm
    title="После архивации запись можно восстановить из корзины."
    confirm-text="Архивировать"
    cancel-text="Отмена"
    placement="right"
  >
    <LhButton>Свой текст</LhButton>
  </LhPopconfirm>
  <!-- Срабатывание по наведению -->
  <LhPopconfirm title="Достаточно навести курсор." trigger="hover" :show-after="0" placement="bottom">
    <LhButton>Срабатывание по наведению</LhButton>
  </LhPopconfirm>
</template>

<script>
export default {}
</script>

<template>
  <!-- Пользовательский текст и сторона -->
  <LhPopconfirm
    title="После архивации запись можно восстановить из корзины."
    confirm-text="Архивировать"
    cancel-text="Отмена"
    placement="right"
  >
    <LhButton>Свой текст</LhButton>
  </LhPopconfirm>
  <!-- Срабатывание по наведению -->
  <LhPopconfirm title="Достаточно навести курсор." trigger="hover" :show-after="0" placement="bottom">
    <LhButton>Срабатывание по наведению</LhButton>
  </LhPopconfirm>
</template>

Текст кнопок по умолчанию берётся из языкового пакета popconfirm.confirm / popconfirm.cancel; переопределить его можно через confirm-text / cancel-text.

Иконка, тип кнопки подтверждения и поведенческие переключатели

show-icon показывает значок-предупреждение, confirm-button-type меняет основной тип кнопки подтверждения; disabled отключает триггер; v-model:visible контролирует видимость; hide-after задаёт задержку автоматического скрытия; popper-class / teleport-target настраивают всплывающий слой.

Иконка и тип кнопки

<script setup lang="ts">
import { ref } from 'vue'
const pcVisible = ref(false)
</script>

<template>
  <!-- Иконка и тип кнопки подтверждения -->
  <LhPopconfirm title="Удалить эту запись?" show-icon confirm-button-type="primary">
    <LhButton type="danger">С иконкой</LhButton>
  </LhPopconfirm>
  <!-- Отключение триггера -->
  <LhPopconfirm title="Это действие недоступно." disabled>
    <LhButton disabled>Отключено</LhButton>
  </LhPopconfirm>
  <!-- Контролируемая видимость и отложенное скрытие -->
  <LhPopconfirm v-model:visible="pcVisible" title="Контролируемое окно" :hide-after="1000">
    <LhButton>{{ pcVisible ? 'Свернуть' : 'Развернуть' }}</LhButton>
  </LhPopconfirm>
</template>

<script>
export default {
  data() {
    return { pcVisible: false }
  },
}
</script>

<template>
  <!-- Иконка и тип кнопки подтверждения -->
  <LhPopconfirm title="Удалить эту запись?" show-icon confirm-button-type="primary">
    <LhButton type="danger">С иконкой</LhButton>
  </LhPopconfirm>
  <!-- Отключение триггера -->
  <LhPopconfirm title="Это действие недоступно." disabled>
    <LhButton disabled>Отключено</LhButton>
  </LhPopconfirm>
  <!-- Контролируемая видимость и отложенное скрытие -->
  <LhPopconfirm v-model:visible="pcVisible" title="Контролируемое окно" :hide-after="1000">
    <LhButton>{{ pcVisible ? 'Свернуть' : 'Развернуть' }}</LhButton>
  </LhPopconfirm>
</template>

Popconfirm API

Props

Свойство	Описание	Тип	По умолчанию
type	Тональность подтверждения	"info" | "warning" | "danger"	'warning'
placement	Позиция отображения	"top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end"	'top'
trigger	Способ вызова	"click" | "hover" | "focus" | "manual"	'click'
title	Содержимое подтверждения (можно также использовать слот content)	string	—
confirmText	Текст кнопки подтверждения (если не передано, берётся из языкового пакета popconfirm.confirm)	string	—
cancelText	Текст кнопки отмены (если не передано, берётся из языкового пакета popconfirm.cancel)	string	—
confirmButtonType	Тип кнопки подтверждения	"default" | "primary"	'primary'
visible	Видимость при ручном управлении (v-model:visible)	boolean	—
disabled	Отключён	boolean	—
showIcon	Показывать ли тональный значок	boolean	true
popperClass	Пользовательский класс всплывающего слоя	string	—
teleportTarget	Цель Teleport (селектор или элемент, по умолчанию body)	string | HTMLElement	'body'
showAfter	Задержка показа (мс)	number	—
hideAfter	Задержка скрытия (мс)	number	—
themeVars	Переменные темы на уровне компонента, переопределяют конфигурацию ConfigProvider	{ [x: string]: string; }	—
bgPattern	Узор фона на уровне компонента, переопределяет конфигурацию ConfigProvider	string	—
sx	Свойства быстрой разметки sx (применяются к корневому элементу триггера)	LhSxProps	—

Events

Событие	Описание	Параметры
confirm	Срабатывает после нажатия кнопки подтверждения	—
cancel	Срабатывает при нажатии кнопки отмены или Escape	—
update:visible	Изменение видимости	(value: boolean)
show	Срабатывает после показа	—
hide	Срабатывает после скрытия	—

Slots

Слот	Описание
default	Содержимое триггера
content	Пользовательское содержимое подтверждения

Methods

Метод	Описание
show	Программный показ
hide	Программное скрытие
toggle	Программное переключение

Доступность

• Всплывающий слой имеет role="alertdialog" + aria-modal="true", триггер — aria-haspopup / aria-expanded
• При открытии фокус попадает на кнопку подтверждения, Tab циклически перемещается между двумя кнопками действий, после закрытия фокус возвращается триггеру
• Escape трактуется как отмена (в соответствии с WAI-ARIA alertdialog: Escape закрывает окно и считается отрицательным ответом)
• Содержимое подтверждения связывается через aria-labelledby; тональный значок декоративный (aria-hidden)

Определения типов

Структуры TypeScript, экспортируемые этим компонентом (автоматически извлечены из packages/components/popconfirm/src/types.ts и исходников @lh-ui/share/core/*; нажмите на каждый пункт, чтобы развернуть полное определение; описания свойств см. в таблице Props выше):

LhPopconfirmProps

/**
 * Props компонента Popconfirm
 */
export interface LhPopconfirmProps {
  /** Тональность подтверждения */
  type?: LhPopconfirmType
  /** Позиция отображения */
  placement?: LhPlacement
  /** Способ вызова */
  trigger?: LhPopconfirmTrigger
  /** Содержимое подтверждения (можно также использовать слот content) */
  title?: string
  /** Текст кнопки подтверждения (если не передано, берётся из языкового пакета popconfirm.confirm) */
  confirmText?: string
  /** Текст кнопки отмены (если не передано, берётся из языкового пакета popconfirm.cancel) */
  cancelText?: string
  /** Тип кнопки подтверждения */
  confirmButtonType?: 'default' | 'primary'
  /** Видимость при ручном управлении (v-model:visible) */
  visible?: boolean
  /** Отключён */
  disabled?: boolean
  /** Показывать ли тональный значок */
  showIcon?: boolean
  /** Пользовательский класс всплывающего слоя */
  popperClass?: string
  /** Цель Teleport (селектор или элемент, по умолчанию body) */
  teleportTarget?: string | HTMLElement
  /** Задержка показа (мс) */
  showAfter?: number
  /** Задержка скрытия (мс) */
  hideAfter?: number
  /** Переменные темы на уровне компонента, переопределяют конфигурацию ConfigProvider */
  themeVars?: Record<string, string>
  /** Узор фона на уровне компонента, переопределяет конфигурацию ConfigProvider */
  bgPattern?: string
  /** Свойства быстрой разметки sx (применяются к корневому элементу триггера) */
  sx?: LhSxProps
}

LhPopconfirmPlacement _{(из @lh-ui/share/core/shared/popper)}

/**
 * Движок позиционирования Popper (чистые функции, без зависимости от фреймворка)
 *
 * Геометрические вычисления, общие для всплывающих слоёв
 * (Tooltip / Popover / Popconfirm / Dropdown и др.):
 * размещение для 12 вариантов placement, flip при переполнении по главной оси,
 * сдвиг (shift) при выходе за поперечную ось.
 * Все аргументы — литералы rect, DOM не затрагивается, что позволяет
 * тестировать функции напрямую.
 */

/** Сторона всплывающего слоя (направление + выравнивание) */
export type LhPlacement =
  | 'top'
  | 'top-start'
  | 'top-end'
  | 'bottom'
  | 'bottom-start'
  | 'bottom-end'
  | 'left'
  | 'left-start'
  | 'left-end'
  | 'right'
  | 'right-start'
  | 'right-end'

LhPopconfirmTrigger _{(из @lh-ui/share/core/popconfirm (logic.ts))}

/** Способ вызова */
export type LhPopconfirmTrigger = 'click' | 'hover' | 'focus' | 'manual'

LhPopconfirmType _{(из @lh-ui/share/core/popconfirm (logic.ts))}

/** Тональность подтверждения */
export type LhPopconfirmType = 'info' | 'warning' | 'danger'