Informe les utilisateurs tout en préservant l'état de la page.
### Usage
Le Dialog ouvre un modal personnalisable.
:::demo Configurez l'attribut `visible` avec un `Boolean`, un modal apparaîtra quand la valeur sera à `true`. Le Dialog possède deux parties: `body` et `footer`, ce-dernier nécessitant un `slot` appelé `footer`. L'attribut optionnel `title` (vide par défaut) définit le titre. Cet exemple montre également comment `before-close` peut être utilisé.
```html
<el-buttontype="text"@click="dialogVisible =true">Cliquez pour ouvrir le modal</el-button>
`before-close` ne fonctionne que quand l'utilisateur clique sur l'icône de fermeture en dehors du modal. S'il y a des boutons dans le `footer`, vous pouvez configurer `before-close` grâce à leur évènement click.
:::
### Personalisation
Le contenu du modal peut être n'importe quoi, tableau ou formulaire compris.
:::demo
```html
<!-- Table -->
<el-buttontype="text"@click="dialogTableVisible =true">Ouvrir un modal avec tableau</el-button>
Si un Dialog est imbriqué dans un autre Dialog, `append-to-body` est requis.
:::demo Normalement l'utilisation de Dialog imbriqué est déconseillée. Si vous avez besoin de plusieurs Dialogs sur la page, vous pouvez les aplatir afin qu'ils soit au même niveau. Si vous devez absolument utiliser un Dialog imbriqué, configurez l'attribut `append-to-body` du Dialog imbriqué à `true` et il sera ajouté au body au lieu de son noeud parent, afin d'avoir un affichage correct.
```html
<template>
<el-buttontype="text"@click="outerVisible =true">Ouvrir le modal extérieur</el-button>
<el-buttontype="primary"@click="innerVisible =true">Ouvrir le modal intérieur</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
data() {
return {
outerVisible: false,
innerVisible: false
};
}
}
</script>
```
:::
### Centrer le contenu
Le contenu du modal peut être centré.
:::demo Régler `center` à `true` centrera horizontalement le header et le footer. `center` n'affecte que le header et le footer. Le contenu du body pouvant être n'importe quoi, si vous désirez le centrer vous devrez ajouter des règles CSS.
```html
<el-buttontype="text"@click="centerDialogVisible =true">Cliquez pour ouvrir le modal</el-button>
<el-dialog
title="Attention"
:visible.sync="centerDialogVisible"
width="30%"
center>
<span>Le contenu du modal n'est pas centré par défaut.</span>
Le contenu de Dialog bénéficie du lazy loading, ce qui signifie que le slot par défaut n'est pas généré par le DOM avant la première ouverture. Si vous avez besoin de manipuler le DOM ou d'accéder à un composant via `ref`, vous pouvez le faire avec la callback de l'évènement `open`.
:::
:::tip
Si la variable liée à `visible` est gérée dans Vuex, le modificateur `.sync` ne peut pas fonctionner. Dans ce cas retirez-le, écoutez les évènements `open` et `close`, et commitez les mutations Vuex pour mettre à jour la valeur de cette variable.
