Popconfirm (confirmación emergente)

Globo ligero para las confirmaciones secundarias, como alternativa a la confirmación en cuadro de diálogo. Tres tonos y botones personalizables.

Confirmación emergente

<template>
  <div class="demo-col" style="padding: 40px 0">
    <div class="demo-row" style="gap: 24px; flex-wrap: wrap; justify-content: center">
      <LhPopconfirm title="¿Confirmas la eliminación de este registro?" @confirm="onOk">
        <LhButton type="danger">Eliminar</LhButton>
      </LhPopconfirm>
      <LhPopconfirm title="Tono de advertencia" type="warning" placement="top" @confirm="onOk">
        <LhButton type="warning">warning</LhButton>
      </LhPopconfirm>
      <LhPopconfirm title="Tono de peligro" type="danger" placement="right" @confirm="onOk">
        <LhButton type="danger">danger a la derecha</LhButton>
      </LhPopconfirm>
      <LhPopconfirm title="Activación por hover" trigger="hover" placement="bottom" @confirm="onOk">
        <LhButton>hover abajo</LhButton>
      </LhPopconfirm>
    </div>
    <p class="demo-note">Texto y tipo de botón personalizados / sin icono / posicionamiento estricto</p>
    <div class="demo-row" style="gap: 24px; flex-wrap: wrap; justify-content: center">
      <LhPopconfirm
        title="Botones personalizados"
        confirm-text="De acuerdo"
        cancel-text="Pensarlo mejor"
        confirm-button-type="primary"
        placement="left"
        @confirm="onOk"
      >
        <LhButton>Botones personalizados</LhButton>
      </LhPopconfirm>
      <LhPopconfirm title="Sin icono de tono" :show-icon="false" placement="top" @confirm="onOk">
        <LhButton>showIcon=false</LhButton>
      </LhPopconfirm>
      <LhPopconfirm title="Posicionamiento estricto según top" placement="top" :flip="false" @confirm="onOk">
        <LhButton>flip=false</LhButton>
      </LhPopconfirm>
      <LhPopconfirm title="Deshabilitado" disabled>
        <LhButton disabled>disabled</LhButton>
      </LhPopconfirm>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    onOk() {
      LhMessage.success('Confirmado')
    },
  },
}
</script>

Props

Propiedad	Descripción	Tipo	Predeterminado
type	Tono de la confirmación	'info' \| 'warning' \| 'danger'	'info'
placement	Posición de muestra	'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'	'top'
flip	Si se voltea la dirección cuando falta espacio en el eje principal (activado por defecto); con false, se respeta estrictamente placement y se permite desbordar de la ventana	boolean	true
trigger	Forma de activación	'click' \| 'hover' \| 'focus' \| 'manual'	'click'
title	Contenido de la confirmación (también se puede usar el slot content)	string	—
confirmText	Texto del botón de confirmación (si no se pasa, se usa popconfirm.confirm del paquete de idioma)	string	—
cancelText	Texto del botón de cancelación (si no se pasa, se usa popconfirm.cancel del paquete de idioma)	string	—
confirmButtonType	Tipo del botón de confirmación	'default' \| 'primary'	'primary'
visible	Estado de muestra controlado manualmente (:visible.sync)	boolean	—
disabled	Si se deshabilita	boolean	false
showIcon	Si se muestra el icono de tono	boolean	true
popperClass	Clase personalizada de la capa emergente	string	—
teleportTarget	Destino de montaje de la capa emergente (selector o elemento; body por defecto; en 2.7 no hay Teleport, se implementa moviendo el host)	string \| HTMLElement	—
showAfter	Tiempo de muestra diferido (ms)	number	—
hideAfter	Tiempo de ocultación diferido (ms)	number	—
themeVars	Variables de tema a nivel de componente; sobrescribe la configuración de ConfigProvider	Record<string, string>	—
bgPattern	Patrón de fondo a nivel de componente; sobrescribe la configuración de ConfigProvider	string	—
sx	Propiedad de diseño rápido sx (se aplica al elemento raíz del activador)	—	—

Eventos

Evento	Descripción	Parámetro de callback
confirm	Al hacer clic en el botón de confirmación	—
cancel	Al hacer clic en el botón de cancelación	—

Slots

Slot	Descripción
default	Activador
content	Contenido de la confirmación (toma el prop title por defecto)