Popconfirm (confirmation contextuelle)

Bulle légère de confirmation, en remplacement des dialogues de confirmation. Trois tons, boutons personnalisables.

Confirmation contextuelle

<template>
  <div class="demo-col" style="padding: 40px 0">
    <div class="demo-row" style="gap: 24px; flex-wrap: wrap; justify-content: center">
      <LhPopconfirm title="Confirmer la suppression de cette notice ?" @confirm="onOk">
        <LhButton type="danger">Supprimer</LhButton>
      </LhPopconfirm>
      <LhPopconfirm title="Ton d'avertissement" type="warning" placement="top" @confirm="onOk">
        <LhButton type="warning">warning</LhButton>
      </LhPopconfirm>
      <LhPopconfirm title="Ton de danger" type="danger" placement="right" @confirm="onOk">
        <LhButton type="danger">danger à droite</LhButton>
      </LhPopconfirm>
      <LhPopconfirm title="Déclenchement au survol" trigger="hover" placement="bottom" @confirm="onOk">
        <LhButton>hover en bas</LhButton>
      </LhPopconfirm>
    </div>
    <p class="demo-note">Texte et type de boutons personnalisés / sans icône / positionnement strict</p>
    <div class="demo-row" style="gap: 24px; flex-wrap: wrap; justify-content: center">
      <LhPopconfirm
        title="Boutons personnalisés"
        confirm-text="Pas de problème"
        cancel-text="Réfléchir encore"
        confirm-button-type="primary"
        placement="left"
        @confirm="onOk"
      >
        <LhButton>Boutons personnalisés</LhButton>
      </LhPopconfirm>
      <LhPopconfirm title="Sans icône de ton" :show-icon="false" placement="top" @confirm="onOk">
        <LhButton>showIcon=false</LhButton>
      </LhPopconfirm>
      <LhPopconfirm title="Positionnement top strict" placement="top" :flip="false" @confirm="onOk">
        <LhButton>flip=false</LhButton>
      </LhPopconfirm>
      <LhPopconfirm title="Désactivé" disabled>
        <LhButton disabled>disabled</LhButton>
      </LhPopconfirm>
    </div>
  </div>
</template>

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

Props

Propriété	Description	Type	Valeur par défaut
type	Ton de la confirmation	'info' \| 'warning' \| 'danger'	'info'
placement	Position d'affichage	'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'	'top'
flip	Inversion de direction lorsque l'espace manque sur l'axe principal (activé par défaut) ; à false, le positionnement suit strictement placement, avec débordement de la fenêtre possible	boolean	true
trigger	Mode de déclenchement	'click' \| 'hover' \| 'focus' \| 'manual'	'click'
title	Contenu de la confirmation (ou slot content)	string	—
confirmText	Texte du bouton de confirmation (pack de langue popconfirm.confirm si non transmis)	string	—
cancelText	Texte du bouton d'annulation (pack de langue popconfirm.cancel si non transmis)	string	—
confirmButtonType	Type du bouton de confirmation	'default' \| 'primary'	'primary'
visible	État d'affichage contrôlé manuellement (:visible.sync)	boolean	—
disabled	Désactivé	boolean	false
showIcon	Affiche l'icône de ton	boolean	true
popperClass	Classe personnalisée du calque flottant	string	—
teleportTarget	Cible de montage du calque flottant (sélecteur ou élément, body par défaut ; 2.7 n'a pas de Teleport, déplacement assuré par l'hôte)	string \| HTMLElement	—
showAfter	Délai d'affichage (ms)	number	—
hideAfter	Délai de masquage (ms)	number	—
themeVars	Variables de thème au niveau du composant, surcharge la configuration du ConfigProvider	Record<string, string>	—
bgPattern	Motif de fond au niveau du composant, surcharge la configuration du ConfigProvider	string	—
sx	Raccourci de mise en page sx (appliqué à la racine du déclencheur)	—	—

Events

Événement	Description	Paramètres de rappel
confirm	Clic sur le bouton de confirmation	—
cancel	Clic sur le bouton d'annulation	—

Slots

Slot	Description
default	Déclencheur
content	Contenu de la confirmation (prop title par défaut)