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

Облегчённое всплывающее окно для подтверждения действия — альтернатива диалоговому подтверждению. Три тональности, настраиваемые кнопки.

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

<template>
  <div class="demo-col" style="padding: 40px 0">
    <div class="demo-row" style="gap: 24px; flex-wrap: wrap; justify-content: center">
      <LhPopconfirm title="Удалить эту запись из каталога?" @confirm="onOk">
        <LhButton type="danger">Удалить</LhButton>
      </LhPopconfirm>
      <LhPopconfirm title="Предупреждающая тональность" type="warning" placement="top" @confirm="onOk">
        <LhButton type="warning">warning</LhButton>
      </LhPopconfirm>
      <LhPopconfirm title="Опасная тональность" type="danger" placement="right" @confirm="onOk">
        <LhButton type="danger">danger справа</LhButton>
      </LhPopconfirm>
      <LhPopconfirm title="Срабатывание по hover" trigger="hover" placement="bottom" @confirm="onOk">
        <LhButton>hover снизу</LhButton>
      </LhPopconfirm>
    </div>
    <p class="demo-note">Свой текст и тип кнопок / без иконки / строгое позиционирование</p>
    <div class="demo-row" style="gap: 24px; flex-wrap: wrap; justify-content: center">
      <LhPopconfirm
        title="Свои кнопки"
        confirm-text="Да, конечно"
        cancel-text="Подумать ещё"
        confirm-button-type="primary"
        placement="left"
        @confirm="onOk"
      >
        <LhButton>Свои кнопки</LhButton>
      </LhPopconfirm>
      <LhPopconfirm title="Без иконки тональности" :show-icon="false" placement="top" @confirm="onOk">
        <LhButton>showIcon=false</LhButton>
      </LhPopconfirm>
      <LhPopconfirm title="Строгое позиционирование по top" placement="top" :flip="false" @confirm="onOk">
        <LhButton>flip=false</LhButton>
      </LhPopconfirm>
      <LhPopconfirm title="Отключено" disabled>
        <LhButton disabled>disabled</LhButton>
      </LhPopconfirm>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    onOk() {
      LhMessage.success('Подтверждено')
    },
  },
}
</script>

Props

Проп	Описание	Тип	По умолчанию
type	Тональность подтверждения	'info' \| 'warning' \| 'danger'	'info'
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'	'click'
title	Содержимое подтверждения (также можно использовать слот content)	string	—
confirmText	Текст кнопки подтверждения (если не передан, берётся popconfirm.confirm из языкового пакета)	string	—
cancelText	Текст кнопки отмены (если не передан, берётся popconfirm.cancel из языкового пакета)	string	—
confirmButtonType	Тип кнопки подтверждения	'default' \| 'primary'	'primary'
visible	Видимость под ручным управлением (:visible.sync)	boolean	—
disabled	Отключение	boolean	false
showIcon	Показывать ли иконку тональности	boolean	true
popperClass	Пользовательский класс всплывающего слоя	string	—
teleportTarget	Целевой элемент монтирования всплывающего слоя (селектор или элемент, по умолчанию body; в Vue 2.7 нет Teleport — реализован перенос хоста)	string \| HTMLElement	—
showAfter	Задержка показа (мс)	number	—
hideAfter	Задержка скрытия (мс)	number	—
themeVars	Переменные темы на уровне компонента, переопределяют конфигурацию ConfigProvider	Record<string, string>	—
bgPattern	Фоновый узор на уровне компонента, переопределяет конфигурацию ConfigProvider	string	—
sx	Проп sx для быстрого макета (применяется к корневому элементу триггера)	—	—

Events

Событие	Описание	Параметры обратного вызова
confirm	Нажата кнопка подтверждения	—
cancel	Нажата кнопка отмены	—

Slots

Слот	Описание
default	Триггер
content	Содержимое подтверждения (по умолчанию берётся проп title)