## MessageBox

Un ensemble de fenêtres modales pour afficher des messages système, tels que des alertes, des demandes de confirmation ou des informations importantes.

:::tip
MessageBox est avant tout conçue pour émuler des `alert`, `confirm` ou `prompt`, son contenu devrait donc être simple. Pour afficher un contenu plus riche, utilisez plutôt Dialog.
:::

### Alert

Alert interrompt l'action de l'utilisateur jusqu'à ce qu'il confirme.

:::demo Ouvrez un alert en appelant la méthode `$alert`. Elle simule une `alert` système et ne peut être fermée en pressant ESC ou en cliquant hors de la boite. Dans cet exemple, deux paramètres `message` et `title` sont reçus. Notez que lorsque la boite est fermée, elle retourne un objet `Promise`. Si vous n'êtes pas certains que tout vos navigateurs cibles supportent `Promise`, utilisez un polyfill ou utilisez des callbacks comme dans l'exemple qui suit.

```html
<template>
  <el-button type="text" @click="open">Cliquez pour ouvrir la MessageBox</el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$alert('Ceci est un message', 'Titre', {
          confirmButtonText: 'OK',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${ action }`
            });
          }
        });
      }
    }
  }
</script>
<!--
<setup>

  import { defineComponent } from 'vue';
  import { ElMessageBox } from 'element-plus';

  export default defineComponent({
    setup() {
      
      const open = () => {
        ElMessageBox.alert('Ceci est un message', 'Titre', {
          confirmButtonText: 'OK',
          callback: (action) => {
            this.$message({
              type: 'info',
              message: `action: ${action}`,
            });
          },
        });
      };

      return {
        open,
      };
    },
  });

</setup>
-->
```
:::

### Confirm

Confirm est utilisé pour demander une confirmation à l'utilisateur.

:::demo Appelez la méthode `$confirm` pour ouvrir une confirm, qui simule le `confirm` système. Vous pouvez aussi personnaliser MessageBox en passant un objet à l'attribut `options`. L'attribut `type` indique le type de message (voir en bas de la page pour la liste des valeurs possibles). Notez que l'attribut `title` doit être de type `string`. S'il se trouve être un `object`, il sera considéré comme étant l'attribut `options`. Cet exemple utilise une `Promise` pour gérer la suite du processus.

```html
<template>
  <el-button type="text" @click="open">Cliquez pour ouvrir la MessageBox</el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$confirm('Ceci effacera le fichier. Continuer?', 'Warning', {
          confirmButtonText: 'OK',
          cancelButtonText: 'Annuler',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: 'Fichier supprimé'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: 'Suppression annulée'
          });
        });
      }
    }
  }
</script>
<!--
<setup>

  import { defineComponent } from 'vue';
  import { ElMessageBox } from 'element-plus';
  import { ElMessage } from 'element-plus';

  export default defineComponent({
    setup() {
      
      const open = () => {
        ElMessageBox.confirm('Ceci effacera le fichier. Continuer?', 'Warning', {
            confirmButtonText: 'OK',
            cancelButtonText: 'Annuler',
            type: 'warning',
          })
          .then(() => {
            ElMessage({
              type: 'success',
              message: 'Fichier supprimé',
            });
          })
          .catch(() => {
            ElMessage({
              type: 'info',
              message: 'Suppression annulée',
            });
          });
      };

      return {
        open,
      };
    },
  });

</setup>
-->
```

:::

### Prompt

Prompt est utilisé lorsqu'un utilisateur.

:::demo Appellez la méthode `$prompt` pour ouvrir un prompt simulant le `prompt` système. Vous pouvez utiliser le paramètre `inputPattern` pour spécifier un pattern à l'aide d'une RegExp. Utilisez `inputValidator` pour indiquer la méthode de validation, qui devra retourner un `Boolean` ou un `String`. Retourner `false` ou un `String` veut dire que la validation a échouée, et la string ainsi fournie sera le `inputErrorMessage`. De plus, vous pouvez personnaliser le placeholder du champs avec le paramètre `inputPlaceholder`.

```html
<template>
  <el-button type="text" @click="open">Cliquez pour ouvrir la MessageBox</el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$prompt('Entrez votre e-mail', 'Astuce', {
          confirmButtonText: 'OK',
          cancelButtonText: 'Annuler',
          inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
          inputErrorMessage: 'E-mail invalide'
        }).then(({ value }) => {
          this.$message({
            type: 'success',
            message: 'Votre e-mail est: ' + value
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: 'Annulé'
          });
        });
      }
    }
  }
</script>
<!--
<setup>

  import { defineComponent } from 'vue';
  import { ElMessageBox } from 'element-plus';
  import { ElMessage } from 'element-plus';

  export default defineComponent({
    setup() {
      
      const open = () => {
        ElMessageBox.prompt('Entrez votre e-mail', 'Astuce', {
          confirmButtonText: 'OK',
          cancelButtonText: 'Annuler',
          inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
          inputErrorMessage: 'E-mail invalide',
        }).then(({ value }) => {
          ElMessage({
            type: 'success',
            message: `Votre e-mail est: ${value}`,
          });
        }).catch(() => {
          ElMessage({
            type: 'info',
            message: 'Annulé',
          });
        });
      };

      return {
        open,
      };
    },
  });

</setup>
-->
```
:::

### Personnalisation

Il est possible d'afficher du contenu un peu plus varié et personnalisé.

:::demo les trois précédentes méthodes sont des repackagings de la méthode `$msgbox`. cet exemple appelle directement `$msgbox` en utilisant l'attribut `showCancelButton` pour indiquer si un bouton annuler doit être affiché. De plus, vous pouvez utiliser `cancelButtonClass` pour ajouter du style et `cancelButtonText` pour personnaliser le bouton texte (voir la liste complète en fin de page). La méthode `beforeClose`est appelée quand la MessageBox va être fermée et prévient sa fermeture. Elle prend trois paramètres: `action`, `instance` et `done`. Elle vous permet ainsi d'effectuer des actions avant la fermeture, e.g. activer `loading` pour le bouton de confirmation. Appelez `done` pour fermer la MessageBox, sinon l'instance ne sera jamais fermée.

```html
<template>
  <el-button type="text" @click="open">Cliquez pour ouvrir la MessageBox</el-button>
</template>

<script>
  import { h } from 'vue';

  export default {
    methods: {
      open() {
        this.$msgbox({
          title: 'Message',
          message: h('p', null, [
            h('span', null, 'Le message peut être '),
            h('i', { style: 'color: teal' }, 'VNode')
          ]),
          showCancelButton: true,
          confirmButtonText: 'OK',
          cancelButtonText: 'Annuler',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = 'Chargement...';
              setTimeout(() => {
                done();
                setTimeout(() => {
                  instance.confirmButtonLoading = false;
                }, 300);
              }, 3000);
            } else {
              done();
            }
          }
        }).then(action => {
          this.$message({
            type: 'info',
            message: 'Action: ' + action
          });
        });
      },
    }
  }
</script>
<!--
<setup>

  import { defineComponent, h } from 'vue';
  import { ElMessage } from 'element-plus';

  export default defineComponent({
    setup() {
      
      const open = () => {
        ElMessageBox({
          title: 'Message',
          message: h('p', null, [
            h('span', null, 'Le message peut être '),
            h('i', { style: 'color: teal' }, 'VNode'),
          ]),
          showCancelButton: true,
          confirmButtonText: 'OK',
          cancelButtonText: 'Annuler',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = 'Chargement...';
              setTimeout(() => {
                done();
                setTimeout(() => {
                  instance.confirmButtonLoading = false;
                }, 300);
              }, 3000);
            } else {
              done();
            }
          },
        }).then((action) => {
          ElMessage({
            type: 'info',
            message: `Action: ${action}`,
          });
        });
      };

      return {
        open,
      };
    },
  });

</setup>
-->
```
:::

:::tip
Le contenu de MessageBox peut être `VNode`, Vous permettant de passer des composants personnalisés. Lorsque vous ouvrer MessageBox, Vue compare le nouveau `VNode` avec l'ancien `VNode`, puis détermine comment rafraîchir efficacement l'UI, le composant peut donc ne pas être totalement re-rendu ([#8931](https://github.com/ElemeFE/element/issues/8931)). Dans ce cas, Vous pouvez ajouter une clé unique à `VNode` à chaque fois que MessageBox s'ouvre: [exemple](https://jsfiddle.net/zhiyang/ezmhq2ef).
:::

### Utiliser du HTML

`message` supporte le HTML.

:::demo Mettez `dangerouslyUseHTMLString` à `true` et `message` sera traité comme du HTML.

```html
<template>
  <el-button type="text" @click="open">Cliquez pour ouvrir la MessageBox</el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$alert('<strong>Ceci est du <i>HTML</i></strong>', 'HTML', {
          dangerouslyUseHTMLString: true
        });
      }
    }
  }
</script>
<!--
<setup>

  import { defineComponent } from 'vue';
  import { ElMessageBox } from 'element-plus';

  export default defineComponent({
    setup() {
      
      const open = () => {
        ElMessageBox.alert('<strong>Ceci est du <i>HTML</i></strong>', 'HTML', {
          dangerouslyUseHTMLString: true,
        });
      };

      return {
        open,
      };
    },
  });

</setup>
-->
```
:::

:::warning
Bien que la propriété `message` supporte le HTML, générer du contenu HTML dynamiquement peut être très dangereux, car cela permet des [attaques XSS](https://en.wikipedia.org/wiki/Cross-site_scripting). Donc lorsque `dangerouslyUseHTMLString` est présent, soyez certain de sécuriser le contenu de `message`, et n'assignez **jamais** à `message` du contenu fournit par l'utilisateur.
:::

### Distinguer 'annuler' de 'fermer'

Dans certains cas, les boutons fermer et annuler peuvent avoir des sens différents.

:::demo Par défaut, le paramètre de la `callback` et de la promesse rejetée est 'cancel' lorsque l'utilisateur annule (clique sur le bouton annuler) ou lorsqu'il ferme la fenêtre (clique sur le bouton fermer, hors de la fenêtre, ou presse ESC). Si `distinguishCancelAndClose` est à `true`, le dernier cas précédent renvoie 'close' au lieu de 'cancel' afin de pouvoir gérer les deux actions différemment.

```html
<template>
  <el-button type="text" @click="open">Cliquez pour ouvrir la MessageBox</el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$confirm('Vous avez du travail non enregistré, enregistrer et quitter?', 'Confirm', {
          distinguishCancelAndClose: true,
          confirmButtonText: 'Enregistrer',
          cancelButtonText: 'Ne pas enregistrer'
        })
          .then(() => {
            this.$message({
              type: 'info',
              message: 'Enregistré. Passage a une nouvelle route.'
            });
          })
          .catch(action => {
            this.$message({
              type: 'info',
              message: action === 'cancel'
                ? 'Changements annulés. Passage sur une nouvelle route.'
                : 'Reste sur la même route'
            })
          });
      }
    }
  }
</script>
<!--
<setup>

  import { defineComponent } from 'vue';
  import { ElMessageBox } from 'element-plus';
  import { ElMessage } from 'element-plus';

  export default defineComponent({
    setup() {

      const open = () => {
        ElMessageBox.confirm('Vous avez du travail non enregistré, enregistrer et quitter?', 'Confirm', {
          distinguishCancelAndClose: true,
          confirmButtonText: 'Enregistrer',
          cancelButtonText: 'Ne pas enregistrer',
        })
          .then(() => {
            ElMessage({
              type: 'info',
              message: 'Enregistré. Passage a une nouvelle route.',
            });
          })
          .catch((action) => {
            ElMessage({
              type: 'info',
              message: action === 'cancel'
                ? 'Changements annulés. Passage sur une nouvelle route.'
                : 'Reste sur la même route',
            });
          });
      };

      return {
        open,
      };
    },
  });

</setup>
-->
```
:::

### Contenu centré

le contenu de MessageBox peut être centré.

:::demo Mettre `center` à `true` centrera le contenu

```html
<template>
  <el-button type="text" @click="open">Cliquez pour ouvrir la MessageBox</el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$confirm('Ceci effacera le fichier, continuer?' , 'Warning', {
          confirmButtonText: 'OK',
          cancelButtonText: 'Annuler',
          type: 'warning',
          center: true
        }).then(() => {
          this.$message({
            type: 'success',
            message: 'Fichier supprimé'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: 'Annulé'
          });
        });
      }
    }
  }
</script>
<!--
<setup>

  import { defineComponent } from 'vue';
  import { ElMessageBox } from 'element-plus';
  import { ElMessage } from 'element-plus';

  export default defineComponent({
    setup() {
      
      const open = () => {
        ElMessageBox.confirm('Ceci effacera le fichier, continuer?', 'Warning', {
          confirmButtonText: 'OK',
          cancelButtonText: 'Annuler',
          type: 'warning',
          center: true,
        }).then(() => {
          ElMessage({
            type: 'success',
            message: 'Fichier supprimé',
          });
        }).catch(() => {
          ElMessage({
            type: 'info',
            message: 'Annulé',
          });
        });
      };

      return {
        open,
      };
    },
  });

</setup>
-->
```
:::

### Méthode globale

Si Element Plus est importé entièrement, il ajoutera les méthodes suivantes à `app.config.globalProperties`: `$msgbox`, `$alert`, `$confirm` et `$prompt`. Dans ce cas vous pouvez appeler `MessageBox` comme nous l'avons fait dans cette page. Les paramètres sont:
- `$msgbox(options)`
- `$alert(message, title, options)` ou `$alert(message, options)`
- `$confirm(message, title, options)` ou `$confirm(message, options)`
- `$prompt(message, title, options)` ou `$prompt(message, options)`

### Import à la demande

Si vous préférer importer `MessageBox` à la demande:

```javascript
import { ElMessageBox } from 'element-plus';
```

Les méthodes correspondantes sont: `ElMessageBox`, `ElMessageBox.alert`, `ElMessageBox.confirm` et `ElMessageBox.prompt`. Les paramètres sont les mêmes que précédemment.

### Options

| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
|---------- |-------------- |---------- |--------------------------------  |-------- |
| title | Titre de la MessageBox. | string | — | — |
| message | Contenu de la MessageBox. | string | — | — |
| dangerouslyUseHTMLString | Si `message` doit être traité comme du HTML. | boolean | — | false |
| type | Type du message, utilisé pour le choix d'icône. | string | success / info / warning / error | — |
| iconClass | Classe d'icône personnalisée, écrase `type`. | string | — | — |
| customClass | Nom de classe pour MessageBox. | string | — | — |
| callback | La callback de fermeture de MessageBox si vous n'utilisez pas les promesses. | function(action, instance), ou `action` peut être 'confirm', 'cancel' ou 'close', et `instance` est l'instance MessageBox. | — | — |
| showClose | Si l'icône de fermeture doit être affichée. | boolean | — | true |
| beforeClose | La callback de pré-fermeture qui empèchera MessageBox de se fermer. | function(action, instance, done), ou `action` peut-être 'confirm', 'cancel' ou 'close'; `instance` est l'instance de MessageBox; `done` est la méthode pour fermer l'instance. | — | — |
| distinguishCancelAndClose | S'il doit y avoir une différence entre l'annulation et la fermeture de la MessageBox. | boolean | — | false |
| lockScroll | Si le défilement de la page doit être bloqué lorsque la MessageBox est active. | boolean | — | true |
| showCancelButton | Si le bouton annuler doit être affiché. | boolean | — | false (true dans le cas de confirm ou prompt). |
| showConfirmButton | Si le bouton confirmer doit être affiché. | boolean | — | true |
| cancelButtonText | Le texte du bouton annuler. | string | — | Cancel |
| confirmButtonText | Le texte du bouton confirmer. | string | — | OK |
| cancelButtonClass | Classe du bouton annuler. | string | — | — |
| confirmButtonClass | Classe du bouton confirmer. | string | — | — |
| closeOnClickModal | Si MessageBox peut être fermée en cliquant en dehors. | boolean | — | true (false dans le cas de alert). |
| closeOnPressEscape | Si MessageBox peut être fermée en pressant ESC. | boolean | — | true (false dans le cas de alert) |
| closeOnHashChange | Si MessageBox doit être fermée quand le hash change. | boolean | — | true |
| showInput | Si un champs d'input doit être affiché. | boolean | — | false (true dans le cas de prompt). |
| inputPlaceholder | Placeholder du champs d'input. | string | — | — |
| inputType | Type du champs d'input. | string | — | text |
| inputValue | Valeur initiale du champs d'input. | string | — | — |
| inputPattern | RegExp du champs d'input. | regexp | — | — |
| inputValidator | Fonction de validation du champs d'input. Doit retourner un boolean ou un string. Si c'est un string, il sera assigné à inputErrorMessage. | function | — | — |
| inputErrorMessage | Message d'erreur lorsque la validation échoue. | string | — | Illegal input |
| center | Si le contenu doit être centré. | boolean | — | false |
| roundButton | Si le bouton doit être rond. | boolean | — | false |
| buttonSize | custom size of confirm and cancel buttons | string | mini / small / medium / large | small |