Boîte de dialogue

Composant de boîte de dialogue modale, utilisé pour afficher des informations importantes ou confirmer une action.

Utilisation de base

vue

<script setup lang="ts">
import { ref } from 'vue'
import { LhButton, LhDialog } from '@lh-ui/vue3'

const dialogVisible1 = ref(false)
</script>

<template>
  <!-- Utilisation de base -->
  <LhButton @click="dialogVisible1 = true">Ouvrir la boîte de dialogue</LhButton>
  <LhDialog v-model="dialogVisible1" title="Information">
    <p>Voici le contenu de la boîte de dialogue</p>
    <template #footer>
      <LhButton @click="dialogVisible1 = false">Annuler</LhButton>
      <LhButton type="primary" @click="dialogVisible1 = false">Confirmer</LhButton>
    </template>
  </LhDialog>
</template>

vue

<script>
import { LhButton, LhDialog } from '@lh-ui/vue3'

export default {
  components: { LhButton, LhDialog },
  data() {
    return {
      dialogVisible1: false
    }
  }
}
</script>

<template>
  <!-- Utilisation de base -->
  <LhButton @click="dialogVisible1 = true">Ouvrir la boîte de dialogue</LhButton>
  <LhDialog v-model="dialogVisible1" title="Information">
    <p>Voici le contenu de la boîte de dialogue</p>
    <template #footer>
      <LhButton @click="dialogVisible1 = false">Annuler</LhButton>
      <LhButton type="primary" @click="dialogVisible1 = false">Confirmer</LhButton>
    </template>
  </LhDialog>
</template>

Largeur et hauteur personnalisées

vue

<script setup lang="ts">
import { ref } from 'vue'
import { LhButton, LhDialog } from '@lh-ui/vue3'

const dialogVisible2 = ref(false)
</script>

<template>
  <!-- Largeur et hauteur personnalisées -->
  <LhButton @click="dialogVisible2 = true">Ouvrir une grande boîte de dialogue</LhButton>
  <LhDialog v-model="dialogVisible2" title="Grande boîte de dialogue" width="600px">
    <p>Une boîte de dialogue aux dimensions personnalisées</p>
    <template #footer>
      <LhButton @click="dialogVisible2 = false">Fermer</LhButton>
    </template>
  </LhDialog>
</template>

vue

<script>
import { LhButton, LhDialog } from '@lh-ui/vue3'

export default {
  components: { LhButton, LhDialog },
  data() {
    return {
      dialogVisible2: false
    }
  }
}
</script>

<template>
  <!-- Largeur et hauteur personnalisées -->
  <LhButton @click="dialogVisible2 = true">Ouvrir une grande boîte de dialogue</LhButton>
  <LhDialog v-model="dialogVisible2" title="Grande boîte de dialogue" width="600px">
    <p>Une boîte de dialogue aux dimensions personnalisées</p>
    <template #footer>
      <LhButton @click="dialogVisible2 = false">Fermer</LhButton>
    </template>
  </LhDialog>
</template>

Déplaçable

vue

<script setup lang="ts">
import { ref } from 'vue'
import { LhButton, LhDialog } from '@lh-ui/vue3'

const dialogVisible3 = ref(false)
</script>

<template>
  <!-- Déplaçable -->
  <LhButton @click="dialogVisible3 = true">Ouvrir une boîte de dialogue déplaçable</LhButton>
  <LhDialog v-model="dialogVisible3" title="Boîte de dialogue déplaçable" draggable>
    <p>Glisser la barre de titre permet de déplacer cette boîte de dialogue.</p>
    <template #footer>
      <LhButton @click="dialogVisible3 = false">Fermer</LhButton>
    </template>
  </LhDialog>
</template>

vue

<script>
import { LhButton, LhDialog } from '@lh-ui/vue3'

export default {
  components: { LhButton, LhDialog },
  data() {
    return {
      dialogVisible3: false
    }
  }
}
</script>

<template>
  <!-- Déplaçable -->
  <LhButton @click="dialogVisible3 = true">Ouvrir une boîte de dialogue déplaçable</LhButton>
  <LhDialog v-model="dialogVisible3" title="Boîte de dialogue déplaçable" draggable>
    <p>Glisser la barre de titre permet de déplacer cette boîte de dialogue.</p>
    <template #footer>
      <LhButton @click="dialogVisible3 = false">Fermer</LhButton>
    </template>
  </LhDialog>
</template>

Personnalisation du thème

Appliquez des couleurs thème personnalisées à la boîte de dialogue.

vue

<script setup lang="ts">
import { ref } from 'vue'
import { LhConfigProvider, LhButton, LhDialog } from '@lh-ui/vue3'

const dialogThemeVisible = ref(false)
const cerblueTheme = {
  'primary-color': '#2B4C7C',
  'primary-color-hover': '#3D649E',
  'primary-color-bg': '#E8EDF3',
}
</script>

<template>
  <LhConfigProvider :theme-vars="cerblueTheme">
    <!-- Thème porcelaine bleue et blanche -->
    <LhButton @click="dialogThemeVisible = true" type="primary">Ouvrir la boîte de dialogue à thème</LhButton>
    <LhDialog v-model="dialogThemeVisible" title="Thème porcelaine bleue et blanche">
      <p>Cette boîte de dialogue utilise les couleurs thème de la porcelaine bleue et blanche</p>
      <template #footer>
        <LhButton @click="dialogThemeVisible = false">Fermer</LhButton>
      </template>
    </LhDialog>
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhButton, LhDialog } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhButton, LhDialog },
  data() {
    return {
      dialogThemeVisible: false,
      cerblueTheme: {
        'primary-color': '#2B4C7C',
        'primary-color-hover': '#3D649E',
        'primary-color-bg': '#E8EDF3',
      },
    }
  },
}
</script>

<template>
  <LhConfigProvider :theme-vars="cerblueTheme">
    <!-- Thème porcelaine bleue et blanche -->
    <LhButton @click="dialogThemeVisible = true" type="primary">Ouvrir la boîte de dialogue à thème</LhButton>
    <LhDialog v-model="dialogThemeVisible" title="Thème porcelaine bleue et blanche">
      <p>Cette boîte de dialogue utilise les couleurs thème de la porcelaine bleue et blanche</p>
      <template #footer>
        <LhButton @click="dialogThemeVisible = false">Fermer</LhButton>
      </template>
    </LhDialog>
  </LhConfigProvider>
</template>

Pour aller plus loin, voir Personnalisation du thème.

Mise en page rapide sx

La prop sx permet de définir rapidement les dimensions et les espacements du Dialog.

vue

<script setup lang="ts">
import { ref } from 'vue'
import { LhButton, LhDialog } from '@lh-ui/vue3'

const visible = ref(false)
</script>

<template>
  <!-- Ouvrir la boîte de dialogue -->
  <LhButton @click="visible = true">Ouvrir la boîte de dialogue</LhButton>
  <!-- Boîte de dialogue en mise en page sx -->
  <LhDialog v-model="visible" title="Mise en page sx" :sx="{ maxWidth: 400 }">
    <p>Une largeur maximale a été définie</p>
    <template #footer>
      <LhButton @click="visible = false">Annuler</LhButton>
    </template>
  </LhDialog>
</template>

vue

<script>
import { LhButton, LhDialog } from '@lh-ui/vue3'

export default {
  components: { LhButton, LhDialog },
  data() {
    return { visible: false }
  },
}
</script>

<template>
  <!-- Ouvrir la boîte de dialogue -->
  <LhButton @click="visible = true">Ouvrir la boîte de dialogue</LhButton>
  <!-- Boîte de dialogue en mise en page sx -->
  <LhDialog v-model="visible" title="Mise en page sx" :sx="{ maxWidth: 400 }">
    <p>Une largeur maximale a été définie</p>
    <template #footer>
      <LhButton @click="visible = false">Annuler</LhButton>
    </template>
  </LhDialog>
</template>

Internationalisation

Le texte de la boîte de dialogue peut être internationalisé au moyen de LhConfigProvider et des packs de langue.

vue

<script setup lang="ts">
import { ref, computed } from 'vue'
import { LhConfigProvider, LhButton, LhDialog, zhCN, enUS } from '@lh-ui/vue3'

const locale = ref('zh-CN')
const i18nVisible = ref(false)
const messages = computed(() => (locale.value === 'zh-CN' ? zhCN : enUS))
</script>

<template>
  <LhConfigProvider :locale="messages">
    <!-- Ouvrir la boîte de dialogue -->
    <LhButton @click="i18nVisible = true">
      {{ locale === 'zh-CN' ? '打开对话框' : 'Open Dialog' }}
    </LhButton>
    <!-- Boîte de dialogue internationalisée -->
    <LhDialog v-model="i18nVisible" :title="locale === 'zh-CN' ? '提示' : 'Notice'">
      <p>{{ locale === 'zh-CN' ? '对话框内容' : 'Dialog content' }}</p>
      <template #footer>
        <LhButton @click="i18nVisible = false">
          {{ locale === 'zh-CN' ? '取消' : 'Cancel' }}
        </LhButton>
      </template>
    </LhDialog>
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhButton, LhDialog, zhCN, enUS } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhButton, LhDialog },
  data() {
    return {
      locale: 'zh-CN',
      i18nVisible: false,
    }
  },
  computed: {
    messages() {
      return this.locale === 'zh-CN' ? zhCN : enUS
    },
  },
}
</script>

<template>
  <LhConfigProvider :locale="messages">
    <!-- Ouvrir la boîte de dialogue -->
    <LhButton @click="i18nVisible = true">
      {{ locale === 'zh-CN' ? '打开对话框' : 'Open Dialog' }}
    </LhButton>
    <!-- Boîte de dialogue internationalisée -->
    <LhDialog v-model="i18nVisible" :title="locale === 'zh-CN' ? '提示' : 'Notice'">
      <p>{{ locale === 'zh-CN' ? '对话框内容' : 'Dialog content' }}</p>
      <template #footer>
        <LhButton @click="i18nVisible = false">
          {{ locale === 'zh-CN' ? '取消' : 'Cancel' }}
        </LhButton>
      </template>
    </LhDialog>
  </LhConfigProvider>
</template>

Comportements

vue

<script setup lang="ts">
import { ref } from 'vue'
import { LhButton, LhDialog } from '@lh-ui/vue3'

const dialogAdv1 = ref(false)
const dialogAdv2 = ref(false)
const dialogAdv3 = ref(false)

function handleAdvBeforeClose(done: () => void) {
  setTimeout(done, 500)
}
</script>

<template>
  <!-- Boutons uniquement -->
  <LhButton @click="dialogAdv1 = true">Boutons uniquement</LhButton>
  <LhDialog
    v-model="dialogAdv1"
    title="Boutons uniquement"
    :show-close="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <p>Le bouton de fermeture en haut à droite est masqué ; un clic sur le masque ou la touche Échap ne ferme pas non plus la fenêtre, seule la fermeture par les boutons du pied de fenêtre est possible.</p>
    <template #footer>
      <LhButton type="primary" @click="dialogAdv1 = false">J'ai compris</LhButton>
    </template>
  </LhDialog>
  <!-- Défilement non verrouillé -->
  <LhButton @click="dialogAdv2 = true">Défilement non verrouillé</LhButton>
  <LhDialog v-model="dialogAdv2" title="Défilement non verrouillé" :lock-scroll="false">
    <p>La page reste défilable lorsque la boîte de dialogue est ouverte, adapté aux notifications légères au contenu court.</p>
  </LhDialog>
  <!-- Fermeture asynchrone -->
  <LhButton @click="dialogAdv3 = true">Fermeture asynchrone</LhButton>
  <LhDialog v-model="dialogAdv3" title="Fermeture asynchrone" :before-close="handleAdvBeforeClose">
    <p>Après un clic sur le bouton de fermeture, sur le masque ou sur Échap, la fermeture effective n'intervient qu'après 500 ms (simulation d'une validation avant fermeture).</p>
  </LhDialog>
</template>

vue

<script>
import { LhButton, LhDialog } from '@lh-ui/vue3'

export default {
  components: { LhButton, LhDialog },
  data() {
    return {
      dialogAdv1: false,
      dialogAdv2: false,
      dialogAdv3: false,
    }
  },
  methods: {
    handleAdvBeforeClose(done) {
      setTimeout(done, 500)
    },
  },
}
</script>

<template>
  <!-- Boutons uniquement -->
  <LhButton @click="dialogAdv1 = true">Boutons uniquement</LhButton>
  <LhDialog
    v-model="dialogAdv1"
    title="Boutons uniquement"
    :show-close="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <p>Le bouton de fermeture en haut à droite est masqué ; un clic sur le masque ou la touche Échap ne ferme pas non plus la fenêtre, seule la fermeture par les boutons du pied de fenêtre est possible.</p>
    <template #footer>
      <LhButton type="primary" @click="dialogAdv1 = false">J'ai compris</LhButton>
    </template>
  </LhDialog>
  <!-- Défilement non verrouillé -->
  <LhButton @click="dialogAdv2 = true">Défilement non verrouillé</LhButton>
  <LhDialog v-model="dialogAdv2" title="Défilement non verrouillé" :lock-scroll="false">
    <p>La page reste défilable lorsque la boîte de dialogue est ouverte, adapté aux notifications légères au contenu court.</p>
  </LhDialog>
  <!-- Fermeture asynchrone -->
  <LhButton @click="dialogAdv3 = true">Fermeture asynchrone</LhButton>
  <LhDialog v-model="dialogAdv3" title="Fermeture asynchrone" :before-close="handleAdvBeforeClose">
    <p>Après un clic sur le bouton de fermeture, sur le masque ou sur Échap, la fermeture effective n'intervient qu'après 500 ms (simulation d'une validation avant fermeture).</p>
  </LhDialog>
</template>

Position et empilement

vue

<script setup lang="ts">
import { ref } from 'vue'
import { LhButton, LhDialog } from '@lh-ui/vue3'

const dialogAdv4 = ref(false)
const dialogAdv5 = ref(false)
const dialogAdv6 = ref(false)
const dialogAdv7 = ref(false)
</script>

<template>
  <!-- Plein écran -->
  <LhButton @click="dialogAdv4 = true">Plein écran</LhButton>
  <LhDialog v-model="dialogAdv4" title="Boîte de dialogue plein écran" fullscreen>
    <p>Avec fullscreen, la boîte de dialogue occupe toute la surface de la fenêtre.</p>
  </LhDialog>
  <!-- Position en bas -->
  <LhButton @click="dialogAdv5 = true">Position en bas</LhButton>
  <LhDialog v-model="dialogAdv5" title="Position en bas" position="bottom">
    <p>Avec position à bottom, la boîte de dialogue s'affiche tout près du bas de la fenêtre.</p>
  </LhDialog>
  <!-- Décalage supérieur + z-index -->
  <LhButton @click="dialogAdv6 = true">Décalage supérieur + z-index</LhButton>
  <LhDialog v-model="dialogAdv6" title="Décalage supérieur + z-index" position="top" top="10vh" :z-index="3000">
    <p>top ajuste la distance par rapport au haut de la fenêtre, z-index contrôle l'ordre d'empilement.</p>
  </LhDialog>
  <!-- Contenu centré -->
  <LhButton @click="dialogAdv7 = true">Contenu centré (center)</LhButton>
  <LhDialog v-model="dialogAdv7" title="Contenu centré" center>
    <p>center centre le titre et le contenu (par compatibilité avec l'ancienne version ; pour le nouveau code, position est recommandé).</p>
    <template #footer>
      <LhButton @click="dialogAdv7 = false">Annuler</LhButton>
      <LhButton type="primary" @click="dialogAdv7 = false">Confirmer</LhButton>
    </template>
  </LhDialog>
</template>

vue

<script>
import { LhButton, LhDialog } from '@lh-ui/vue3'

export default {
  components: { LhButton, LhDialog },
  data() {
    return {
      dialogAdv4: false,
      dialogAdv5: false,
      dialogAdv6: false,
      dialogAdv7: false,
    }
  },
}
</script>

<template>
  <!-- Plein écran -->
  <LhButton @click="dialogAdv4 = true">Plein écran</LhButton>
  <LhDialog v-model="dialogAdv4" title="Boîte de dialogue plein écran" fullscreen>
    <p>Avec fullscreen, la boîte de dialogue occupe toute la surface de la fenêtre.</p>
  </LhDialog>
  <!-- Position en bas -->
  <LhButton @click="dialogAdv5 = true">Position en bas</LhButton>
  <LhDialog v-model="dialogAdv5" title="Position en bas" position="bottom">
    <p>Avec position à bottom, la boîte de dialogue s'affiche tout près du bas de la fenêtre.</p>
  </LhDialog>
  <!-- Décalage supérieur + z-index -->
  <LhButton @click="dialogAdv6 = true">Décalage supérieur + z-index</LhButton>
  <LhDialog v-model="dialogAdv6" title="Décalage supérieur + z-index" position="top" top="10vh" :z-index="3000">
    <p>top ajuste la distance par rapport au haut de la fenêtre, z-index contrôle l'ordre d'empilement.</p>
  </LhDialog>
  <!-- Contenu centré -->
  <LhButton @click="dialogAdv7 = true">Contenu centré (center)</LhButton>
  <LhDialog v-model="dialogAdv7" title="Contenu centré" center>
    <p>center centre le titre et le contenu (par compatibilité avec l'ancienne version ; pour le nouveau code, position est recommandé).</p>
    <template #footer>
      <LhButton @click="dialogAdv7 = false">Annuler</LhButton>
      <LhButton type="primary" @click="dialogAdv7 = false">Confirmer</LhButton>
    </template>
  </LhDialog>
</template>

Dialog API

Props

Propriété	Description	Type	Valeur par défaut
modelValue	Afficher la boîte de dialogue	`boolean`	`false`
title	Titre de la boîte de dialogue	`string`	`''`
width	Largeur de la boîte de dialogue	`string \| number`	`'480px'`
fullscreen	Plein écran	`boolean`	`false`
showClose	Afficher le bouton de fermeture	`boolean`	`true`
closeOnClickModal	Fermer lors d'un clic sur le masque	`boolean`	`true`
closeOnPressEscape	Fermer avec Échap	`boolean`	`true`
draggable	Déplaçable	`boolean`	`false`
center	Affichage centré (par compatibilité, position est recommandé)	`boolean`	`false`
position	Position de la fenêtre : top / center / bottom	`"top" \| "center" \| "bottom"`	`'center'`
lockScroll	Verrouiller le défilement	`boolean`	`true`
beforeClose	Rappel avant fermeture	`(done: () => void) => void`	—
top	Distance au sommet (px)	`string`	`'15vh'`
zIndex	z-index	`number`	—
themeVars	Variables de thème au niveau du composant, surchargeant la configuration de ConfigProvider	`{ [x: string]: string; }`	—
bgPattern	Motif d'arrière-plan au niveau du composant, surchargeant la configuration de ConfigProvider	`string`	—
sx	Propriétés de mise en page rapide sx	`LhSxProps`	—

Events

Événement	Description	Paramètre de rappel
update:modelValue	L'état d'affichage change	`(value: boolean)`
open	Fin de l'animation d'ouverture	—
close	Fin de l'animation de fermeture	—
opened	Déclenché lorsque la boîte de dialogue est entièrement ouverte	—
closed	Déclenché lorsque la boîte de dialogue est entièrement fermée	—

Slots

Slot	Description
default	Contenu de la boîte de dialogue
header	Zone de titre de la boîte de dialogue
footer	Zone de pied de la boîte de dialogue

Définitions de types

Les structures de types TypeScript exportées par ce composant sont présentées ci-dessous (extraction automatique à partir des sources packages/components/dialog/src/types.ts et @lh-ui/share/core/* ; cliquez sur chaque entrée pour afficher la définition complète ; la description des propriétés se trouve dans le tableau Props ci-dessus) :

LhDialogProps

/**
 * Props du composant Dialog
 */
export interface LhDialogProps {
  /** Affichage */
  modelValue?: boolean
  /** Titre */
  title?: string
  /** Largeur */
  width?: string | number
  /** Plein écran */
  fullscreen?: boolean
  /** Afficher le bouton de fermeture */
  showClose?: boolean
  /** Fermer lors d'un clic sur le masque */
  closeOnClickModal?: boolean
  /** Fermer avec Échap */
  closeOnPressEscape?: boolean
  /** Déplaçable */
  draggable?: boolean
  /** Affichage centré (par compatibilité, position est recommandé) */
  center?: boolean
  /** Position de la fenêtre : top / center / bottom */
  position?: 'top' | 'center' | 'bottom'
  /** Verrouiller le défilement */
  lockScroll?: boolean
  /** Rappel avant fermeture */
  beforeClose?: (done: () => void) => void
  /** Distance au sommet (px) */
  top?: string
  /** z-index */
  zIndex?: number
  /** Variables de thème au niveau du composant, surchargeant la configuration de ConfigProvider */
  themeVars?: Record<string, string>
  /** Motif d'arrière-plan au niveau du composant, surchargeant la configuration de ConfigProvider */
  bgPattern?: string
  /** Propriétés de mise en page rapide sx */
  sx?: LhSxProps
}

Boîte de dialogue ​

Utilisation de base ​

Largeur et hauteur personnalisées ​

Déplaçable ​

Personnalisation du thème ​

Mise en page rapide sx ​

Internationalisation ​

Comportements ​

Position et empilement ​

Dialog API ​

Props ​

Events ​

Slots ​

Définitions de types ​