## 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                                          |