Boîte de dialogue

Boîte de dialogue modale. Vue2 n'a pas de Teleport : l'hôte de la couche flottante est monté dans le body au moment du mounted (positionnement fixed), le composant conservant sa connexion réactive complète ; la fermeture peut être contrôlée par clic sur le masque, ESC, le bouton de fermeture ou beforeClose ; le glisser-déposer et le verrouillage du défilement sont pris en charge.

Boîte de dialogue

<template>
  <div class="demo-col">
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhButton type="primary" @click="basic = true">Boîte de dialogue basique</LhButton>
      <LhButton @click="center = true">position="center" centrée</LhButton>
      <LhButton @click="bottom = true">position="bottom" en bas</LhButton>
      <LhButton @click="full = true">fullscreen plein écran</LhButton>
      <LhButton @click="drag = true">draggable déplaçable</LhButton>
      <LhButton @click="strict = true">Fermeture par masque/Esc interdite</LhButton>
      <LhButton @click="guard = true">Interruption beforeClose</LhButton>
      <LhButton @click="noClose = true">showClose=false</LhButton>
    </div>
    <LhDialog v-model="basic" title="Inscription" width="420px" :top="top" :z-index="2000">
      <p style="margin: 0">La boîte de dialogue est montée dans le body ; le masque et le contenu sont en positionnement fixed. top contrôle la distance au sommet, zIndex le niveau d'empilement.</p>
      <template #footer>
        <LhButton @click="basic = false">Annuler</LhButton>
        <LhButton type="primary" @click="basic = false">Signer</LhButton>
      </template>
    </LhDialog>
    <LhDialog v-model="center" title="Boîte centrée" position="center" width="360px" center>
      <p style="margin: 0">position="center" centre verticalement ; center centre le titre et les boutons du bas.</p>
      <template #footer>
        <LhButton type="primary" @click="center = false">Compris</LhButton>
      </template>
    </LhDialog>
    <LhDialog v-model="bottom" title="Boîte en bas" position="bottom" width="480px">
      <p style="margin: 0">position="bottom" affiche la boîte en bas, idéal pour les panneaux d'actions mobiles.</p>
    </LhDialog>
    <LhDialog v-model="full" title="Vue plein écran" fullscreen>
      <p style="margin: 0">fullscreen remplit tout le viewport, la zone de contenu s'adapte à la hauteur restante.</p>
      <template #footer>
        <LhButton type="primary" @click="full = false">Fermer</LhButton>
      </template>
    </LhDialog>
    <LhDialog v-model="drag" title="Glisser depuis la barre de titre" draggable width="420px">
      <p style="margin: 0">Une fois draggable activé, il suffit de maintenir la barre de titre pour déplacer la boîte.</p>
    </LhDialog>
    <LhDialog
      v-model="strict"
      title="Mode strict"
      width="400px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :lock-scroll="true"
    >
      <p style="margin: 0">closeOnClickModal et closeOnPressEscape sont tous deux désactivés, lockScroll verrouille le défilement de la page ; seule la fermeture par bouton est possible.</p>
      <template #footer>
        <LhButton type="primary" @click="strict = false">Unique issue</LhButton>
      </template>
    </LhDialog>
    <LhDialog v-model="guard" title="Interruption avant fermeture" width="400px" :before-close="beforeClose">
      <p style="margin: 0">beforeClose intercepte la demande de fermeture, ce n'est qu'avec done() que la boîte se ferme vraiment (démo de double confirmation ici).</p>
    </LhDialog>
    <LhDialog v-model="noClose" title="Sans bouton de fermeture" width="360px" :show-close="false">
      <p style="margin: 0">showClose=false masque le bouton de fermeture en haut à droite.</p>
      <template #footer>
        <LhButton type="primary" @click="noClose = false">Fermer</LhButton>
      </template>
    </LhDialog>
  </div>
</template>

<script>
export default {
  data: () => ({
    basic: false,
    center: false,
    bottom: false,
    full: false,
    drag: false,
    strict: false,
    guard: false,
    noClose: false,
    top: '15vh',
  }),
  methods: {
    beforeClose(done) {
      if (window.confirm('Confirmer la fermeture de cette boîte de dialogue ?')) done()
    },
  },
}
</script>

Props

Prop	Description	Type	Valeur par défaut
v-model	Affichage (model : modelValue/input ; compatible également avec l'usage v-model standard en dehors de :visible.sync)	boolean	false
title	Titre	string	''
width	Largeur	string \| number	'480px'
position	Position	'top' \| 'center' \| 'bottom'	'center'
center	Titre et boutons du bas centrés	boolean	false
fullscreen	Plein écran	boolean	false
showClose	Afficher le bouton de fermeture	boolean	true
closeOnClickModal / closeOnPressEscape	Fermeture par masque / ESC	boolean	true
draggable	Glisser depuis l'en-tête (limité par les bords du viewport)	boolean	false
lockScroll	Verrouiller le défilement du body	boolean	true
beforeClose	Interruption avant fermeture, appeler done() pour fermer réellement	(done) => void	—
top	Distance par rapport au sommet (effective lorsque position=top)	string	'15vh'
zIndex / themeVars / bgPattern / sx	Niveau d'empilement et remplacement du thème	—	—

Events

Événement	Description	Paramètre de rappel
input	Synchronisation de l'affichage v-model	boolean
open	Début de l'ouverture (entrée en transition)	—
opened	Fin de l'ouverture (transition terminée)	—
close	Début de la fermeture (transition de sortie)	—
closed	Fin de la fermeture (transition terminée)	—

Slots

Slot	Description
default	Corps
header	En-tête personnalisé
footer	Zone d'actions du bas

Méthodes

Méthode	Description
close()	Ferme la boîte de dialogue
isVisible	État d'affichage courant (defineExpose)