mirror of
https://github.com/element-plus/element-plus.git
synced 2024-12-27 03:01:14 +08:00
392 lines
9.6 KiB
Markdown
392 lines
9.6 KiB
Markdown
## Message
|
|
|
|
Utilisé pour avoir un retour après une action particulière. La différence avec Notification est que ce dernier est surtout utilisé pour afficher des notifications système passives.
|
|
|
|
### Usage
|
|
|
|
S'affiche en haut de la page et disparaît après trois secondes.
|
|
|
|
:::demo L'utilisation de Message est très similaire à Notification, la plupart des options ne sont donc pas expliquées ici. Référez-vous à la table en fin de page et celle de Notification pour en savoir plus. Element Plus affecte la méthode `$message` pour appeler Message. Il peut prendre en paramètre un string ou un VNode, qui sera affiché en tant que body principal.
|
|
|
|
```html
|
|
<template>
|
|
<el-button :plain="true" @click="open">Afficher le message</el-button>
|
|
<el-button :plain="true" @click="openVn">VNode</el-button>
|
|
</template>
|
|
|
|
<script>
|
|
import { h } from 'vue';
|
|
|
|
export default {
|
|
methods: {
|
|
open() {
|
|
this.$message('Ceci est un message.');
|
|
},
|
|
|
|
openVn() {
|
|
this.$message({
|
|
message: h('p', null, [
|
|
h('span', null, 'Message peut être '),
|
|
h('i', { style: 'color: teal' }, 'VNode')
|
|
])
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<!--
|
|
<setup>
|
|
|
|
import { defineComponent, h } from 'vue';
|
|
import { ElMessage } from 'element-plus';
|
|
|
|
export default defineComponent({
|
|
setup() {
|
|
|
|
const open = () => {
|
|
ElMessage('Ceci est un message.');
|
|
};
|
|
|
|
const openVn = () => {
|
|
ElMessage({
|
|
message: h('p', null, [
|
|
h('span', null, 'Message peut être '),
|
|
h('i', { style: 'color: teal' }, 'VNode'),
|
|
]),
|
|
});
|
|
};
|
|
|
|
return {
|
|
open,
|
|
openVn,
|
|
};
|
|
},
|
|
});
|
|
|
|
</setup>
|
|
-->
|
|
```
|
|
:::
|
|
|
|
### Types
|
|
|
|
Utilisé pour montrer un retour d'activités Success, Warning, Message ou Error.
|
|
|
|
:::demo Lorsque vous avez besoin de plus de personnalisation, Message peut aussi accepter un objet en paramètre. Par exemple, le paramètre `type` définit différents types, son défaut étant `info`. Dans ce cas le body est passé comme valeur de `message`. De plus, il existe des méthodes pour chaque type, afin que vous puissiez vous passer de la propriété `type` comme dans `open4`.
|
|
```html
|
|
<template>
|
|
<el-button :plain="true" @click="open2">success</el-button>
|
|
<el-button :plain="true" @click="open3">warning</el-button>
|
|
<el-button :plain="true" @click="open1">message</el-button>
|
|
<el-button :plain="true" @click="open4">error</el-button>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
methods: {
|
|
open1() {
|
|
this.$message('Ceci est un message.');
|
|
},
|
|
open2() {
|
|
this.$message({
|
|
message: 'Félicitations, ceci est un message de succès.',
|
|
type: 'success'
|
|
});
|
|
},
|
|
|
|
open3() {
|
|
this.$message({
|
|
message: 'Attention, ceci est un avertissement.',
|
|
type: 'warning'
|
|
});
|
|
},
|
|
|
|
open4() {
|
|
this.$message.error('Ouups, ceci est une erreur.');
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<!--
|
|
<setup>
|
|
|
|
import { defineComponent } from 'vue';
|
|
import { ElMessage } from 'element-plus';
|
|
|
|
export default defineComponent({
|
|
setup() {
|
|
|
|
const open1 = () => {
|
|
ElMessage('Ceci est un message.');
|
|
};
|
|
|
|
const open2 = () => {
|
|
ElMessage({
|
|
message: 'Félicitations, ceci est un message de succès.',
|
|
type: 'success',
|
|
});
|
|
};
|
|
const open3 = () => {
|
|
ElMessage({
|
|
message: 'Attention, ceci est un avertissement.',
|
|
type: 'warning',
|
|
});
|
|
};
|
|
const open4 = () => {
|
|
ElMessage.error('Ouups, ceci est une erreur.');
|
|
};
|
|
|
|
return {
|
|
open1,
|
|
open2,
|
|
open3,
|
|
open4,
|
|
};
|
|
},
|
|
});
|
|
|
|
</setup>
|
|
-->
|
|
```
|
|
:::
|
|
|
|
### Fermeture
|
|
|
|
Un bouton de fermeture peut être ajouté.
|
|
|
|
:::demo Un Message ne peut être fermé par défaut. Utiliséez `showClose` si vous avez besoin de pouvoir le fermer. De plus, tout comme Notification, Message possède une `duration` réglable. La durée par défaut est de 3000 ms, et infinie si à `0`.
|
|
```html
|
|
<template>
|
|
<el-button :plain="true" @click="open1">message</el-button>
|
|
<el-button :plain="true" @click="open2">success</el-button>
|
|
<el-button :plain="true" @click="open3">warning</el-button>
|
|
<el-button :plain="true" @click="open4">error</el-button>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
methods: {
|
|
open1() {
|
|
this.$message({
|
|
showClose: true,
|
|
message: 'Ceci est un message.'
|
|
});
|
|
},
|
|
|
|
open2() {
|
|
this.$message({
|
|
showClose: true,
|
|
message: 'Félicitations, ceci est un message de succès.',
|
|
type: 'success'
|
|
});
|
|
},
|
|
|
|
open3() {
|
|
this.$message({
|
|
showClose: true,
|
|
message: 'Attention, ceci est un avertissement.',
|
|
type: 'warning'
|
|
});
|
|
},
|
|
|
|
open4() {
|
|
this.$message({
|
|
showClose: true,
|
|
message: 'Ouups, ceci est une erreur.',
|
|
type: 'error'
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<!--
|
|
<setup>
|
|
|
|
import { defineComponent } from 'vue';
|
|
import { ElMessage } from 'element-plus';
|
|
|
|
export default defineComponent({
|
|
setup() {
|
|
|
|
const open1 = () => {
|
|
ElMessage({
|
|
showClose: true,
|
|
message: 'Ceci est un message.',
|
|
});
|
|
};
|
|
|
|
const open2 = () => {
|
|
ElMessage({
|
|
showClose: true,
|
|
message: 'Félicitations, ceci est un message de succès.',
|
|
type: 'success',
|
|
});
|
|
};
|
|
const open3 = () => {
|
|
ElMessage({
|
|
showClose: true,
|
|
message: 'Attention, ceci est un avertissement.',
|
|
type: 'warning',
|
|
});
|
|
};
|
|
const open4 = () => {
|
|
ElMessage({
|
|
showClose: true,
|
|
message: 'Ouups, ceci est une erreur.',
|
|
type: 'error',
|
|
});
|
|
};
|
|
|
|
return {
|
|
open1,
|
|
open2,
|
|
open3,
|
|
open4,
|
|
};
|
|
},
|
|
});
|
|
|
|
</setup>
|
|
-->
|
|
```
|
|
:::
|
|
|
|
### Texte centré
|
|
|
|
Utilisez l'attribut `center` pour centrer le texte.
|
|
|
|
:::demo
|
|
|
|
```html
|
|
<template>
|
|
<el-button :plain="true" @click="openCenter">Texte centré</el-button>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
methods: {
|
|
openCenter() {
|
|
this.$message({
|
|
message: 'Texte centré',
|
|
center: true
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<!--
|
|
<setup>
|
|
|
|
import { defineComponent } from 'vue';
|
|
import { ElMessage } from 'element-plus';
|
|
|
|
export default defineComponent({
|
|
setup() {
|
|
|
|
const openCenter = () => {
|
|
ElMessage({
|
|
message: 'Texte centré',
|
|
center: true,
|
|
});
|
|
};
|
|
|
|
return {
|
|
openCenter,
|
|
};
|
|
},
|
|
});
|
|
|
|
</setup>
|
|
-->
|
|
```
|
|
:::
|
|
|
|
### Utiliser du HTML
|
|
|
|
`message` supporte le HTML.
|
|
|
|
:::demo Mettez `dangerouslyUseHTMLString` à true et `message` sera traité comme du HTML.
|
|
|
|
```html
|
|
<template>
|
|
<el-button :plain="true" @click="openHTML">Utiliser du HTML</el-button>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
methods: {
|
|
openHTML() {
|
|
this.$message({
|
|
dangerouslyUseHTMLString: true,
|
|
message: '<strong>Ceci est du <i>HTML</i></strong>'
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<!--
|
|
<setup>
|
|
|
|
import { defineComponent } from 'vue';
|
|
import { ElMessage } from 'element-plus';
|
|
|
|
export default defineComponent({
|
|
setup() {
|
|
|
|
const openHTML = () => {
|
|
ElMessage({
|
|
dangerouslyUseHTMLString: true,
|
|
message: '<strong>Ceci est du <i>HTML</i></strong>',
|
|
});
|
|
};
|
|
|
|
return {
|
|
openHTML,
|
|
};
|
|
},
|
|
});
|
|
|
|
</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.
|
|
:::
|
|
|
|
### Méthode globale
|
|
|
|
Element Plus ajoute une méthode `$message` à `app.config.globalProperties`. Vous pouvez donc appeler `Message` dans l'instance de Vue comme dans cette page.
|
|
|
|
### Import à la demande
|
|
|
|
```javascript
|
|
import { ElMessage } from 'element-plus';
|
|
```
|
|
|
|
Dans ce cas il faudra appeler `ElMessage(options)`. Les méthodes des différents types sont aussi ajoutées, e.g. `ElMessage.success(options)`. Vous pouvez appeler `ElMessage.closeAll()` pour fermer manuellement toutes les instances.
|
|
|
|
### Options
|
|
|
|
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|
|
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
|
| message | Texte du message. | string / VNode | — | — |
|
|
| type | Type du message. | string | success/warning/info/error | info |
|
|
| iconClass | Classe de l'icône, écrase `type`. | string | — | — |
|
|
| dangerouslyUseHTMLString | Si `message` doit être traité comme du HTML. | boolean | — | false |
|
|
| customClass | Nom de classe pour Message. | string | — | — |
|
|
| duration | La durée d'affichage, en millisecondes. Si 0, la durée est infinie. | number | — | 3000 |
|
|
| showClose | Si un bouton de fermeture doit être affiché. | boolean | — | false |
|
|
| center | Si le texte doit être centré. | boolean | — | false |
|
|
| onClose | Callback de fermeture avec en paramètre l'instance de Message. | function | — | — |
|
|
| offset | set the distance to the top of viewport | number | — | 20 |
|
|
|
|
### Méthodes
|
|
|
|
`Message` et `this.$message` retourne l'instance actuelle. Pour fermer manuellement cette instance, appelez sa méthode `close`.
|
|
|
|
| Méthode | Description |
|
|
| ---- | ---- |
|
|
| close | Ferme l'instance de Message. |
|