* Docs: add french translation (fr-FR) in "components.json". * Docs: add french translation (fr-FR) in "page.json" * Docs: add french translation (fr-FR) in "route.json" * Docs: add french translation (fr-FR) in "title.json" * Docs: remove a comma in "title.json" * Docs: translate alert.md into french (fr-FR) * Docs: remove a comma in "component.json" * Docs: translate badge.md into french (fr-FR) * * a77b5518 Docs: translate breadcrumb.md into french (fr-FR) * * a77b5518 Docs: translate breadcrumb.md into french (fr-FR) * Docs: translate button.md into french (fr-FR) * Docs: translate card.md into french (fr-FR) * Docs: translate carousel.md into french (fr-FR) * Docs: translate cascader.md into french (fr-FR) * Docs: translate checkbox.md into french (fr-FR) * Docs: translate collapse.md into french (fr-FR) * Docs: translate color-picker.md into french (fr-FR) * Docs: translate color.md into french (fr-FR) * Docs: translate container.md into french (fr-FR) * Docs: translate custom-theme.md into french (fr-FR) * Docs: translate date-picker.md into french (fr-FR) * Docs: translate datetime-picker.md into french (fr-FR) * Docs: translate dialog.md into french (fr-FR) * Docs: translate form.md into french (fr-FR) * Docs: translate i18n.md into french (fr-FR) * Docs: translate icon.md into french (fr-FR) * Docs: translate input-number.md into french (fr-FR) * Docs: translate input.md into french (fr-FR) * Docs: translate installation.md into french (fr-FR) * Docs: translate dropdown.md into french (fr-FR) * Docs: translate layout.md into french (fr-FR) * Docs: translate loading.md into french (fr-FR) * Docs: translate menu.md into french (fr-FR) * Docs: translate message-box.md into french (fr-FR) * Docs: translate message.md into french (fr-FR) * Docs: translate notification.md into french (fr-FR) * Docs: translate pagination.md into french (fr-FR) * Docs: translate popover.md into french (fr-FR) * Docs: translate progress.md into french (fr-FR) * Docs: translate quickstart.md into french (fr-FR) * Docs: translate radio.md into french (fr-FR) * Docs: translate rate.md into french (fr-FR) * Docs: translate select.md into french (fr-FR) * Docs: translate slider.md into french (fr-FR) * Docs: translate steps.md into french (fr-FR) * Docs: translate switch.md into french (fr-FR) * Docs: translate table.md into french (fr-FR) * Docs: translate tabs.md into french (fr-FR) * Docs: translate tag.md into french (fr-FR) * Docs: translate time-picker.md into french (fr-FR) * Docs: translate tooltip.md into french (fr-FR) * Docs: translate transfer.md into french (fr-FR) * Docs: translate transition.md into french (fr-FR) * Docs: translate tree.md into french (fr-FR) * Docs: translate typography.md into french (fr-FR) * Docs: translate upload.md into french (fr-FR) * Docs: update the configuration for the french translation * Docs: update the french documentation from 2.4.4 to 2.4.11 * Changelog: translate to line 408 into french (fr-FR) * Changelog: finish the translation into french (fr-FR) * Changelog: update from 2.4.11 to 2.5.4 * Doc: update french translation from 2.4.11 to 2.5.4 * Changelog: fix a display bug with the subtitles * Examples: add french language (fr-FR) in search.vue component * Doc: change some french titles * Doc: add the french locale to app.vue
10 KiB
Notification
Affiche une notification globale dans un coin de la page.
Usage
:::demo Element enregistre la méthode $notify
qui reçoit un objet en paramètre. Dans le cas le plus simple, vous pouvez simplement configure les champs title
et message
. Par défaut, la notification se ferme automatiquement après 4500ms, mais vous pouvez régler une autre durée avec duration
. Si la durée est mise à 0
, la notification ne se fermera pas. duration
prends donc un Number
in millisecondes.
<template>
<el-button
plain
@click="open">
Se ferme automatiquement
</el-button>
<el-button
plain
@click="open2">
Ne se ferme pas automatiquement
</el-button>
</template>
<script>
export default {
methods: {
open() {
const h = this.$createElement;
this.$notify({
title: 'Titre',
message: h('i', { style: 'color: teal' }, 'Ceci est un rappel')
});
},
open2() {
this.$notify({
title: 'Prompt',
message: 'Ceci est un message qui ne se ferme pas',
duration: 0
});
}
}
}
</script>
:::
Types
We provide four types: success, warning, info and error.
:::demo Element fournit quatre types de notifications: success
, warning
, info
et error
. Il sont choisis grâce au champs type
, et n'importe quelle autre valeur sera ignorée. Il existe des méthodes enregistrées pour chaque type, comme dans open5
et open6
, qui ne nécessitent donc pas le champs type
.
<template>
<el-button
plain
@click="open3">
Success
</el-button>
<el-button
plain
@click="open4">
Warning
</el-button>
<el-button
plain
@click="open5">
Info
</el-button>
<el-button
plain
@click="open6">
Error
</el-button>
</template>
<script>
export default {
methods: {
open3() {
this.$notify({
title: 'Success',
message: 'Ceci est un message de succès',
type: 'success'
});
},
open4() {
this.$notify({
title: 'Warning',
message: 'Ceci est un avertissement',
type: 'warning'
});
},
open5() {
this.$notify.info({
title: 'Info',
message: 'Ceci est une information'
});
},
open6() {
this.$notify.error({
title: 'Error',
message: 'Ceci est une erreur'
});
}
}
}
</script>
:::
Position personnalisée
La notification peut apparaître dans le coin de votre choix.
:::demo L'attribut position
définit le coin d'apparition de la notification. Cela peut être top-right
, top-left
, bottom-right
ou bottom-left
. Le défaut est top-right
.
<template>
<el-button
plain
@click="open7">
Top Right
</el-button>
<el-button
plain
@click="open8">
Bottom Right
</el-button>
<el-button
plain
@click="open9">
Bottom Left
</el-button>
<el-button
plain
@click="open10">
Top Left
</el-button>
</template>
<script>
export default {
methods: {
open7() {
this.$notify({
title: 'Custom Position',
message: 'Je suis dans le coin supérieur droit'
});
},
open8() {
this.$notify({
title: 'Custom Position',
message: 'Je suis dans le coin inférieur droit',
position: 'bottom-right'
});
},
open9() {
this.$notify({
title: 'Custom Position',
message: 'Je suis dans le coin inférieur gauche',
position: 'bottom-left'
});
},
open10() {
this.$notify({
title: 'Custom Position',
message: 'Je suis dans le coin supérieur gauche',
position: 'top-left'
});
}
}
}
</script>
:::
Avec décalage
Vous pouvez décaler l'emplacement de la notification par rapport au bord de la page.
:::demo Réglez offset
pour choisir le décalage de la notification. Notez que chaque notification apparaissant au même moment devrait avoir le même décalage.
<template>
<el-button
plain
@click="open11">
Notification avec décalage
</el-button>
</template>
<script>
export default {
methods: {
open11() {
this.$notify.success({
title: 'Success',
message: 'Ceci est un message de succès',
offset: 100
});
}
}
}
</script>
:::
Utiliser du HTML
L'attribut message
supporte le HTML.
:::demo Mettez dangerouslyUseHTMLString
à true et message
sera traité comme du HTML.
<template>
<el-button
plain
@click="open12">
Utiliser du HTML
</el-button>
</template>
<script>
export default {
methods: {
open12() {
this.$notify({
title: 'HTML String',
dangerouslyUseHTMLString: true,
message: '<strong>Ceci est du <i>HTML</i></strong>'
});
}
}
}
</script>
:::
:::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. 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.
:::
Cacher le bouton de fermeture
Il est possible de cacher le bouton de fermeture.
:::demo Mettez showClose
à false
Pour que la notification ne puisse pas être fermée par l'utilisateur.
<template>
<el-button
plain
@click="open13">
Bouton de fermeture caché
</el-button>
</template>
<script>
export default {
methods: {
open13() {
this.$notify.success({
title: 'Info',
message: 'Ceci est un message sans bouton de fermeture',
showClose: false
});
}
}
}
</script>
:::
Méthode globale
Element ajoute la méthode $notify
à Vue.prototype. Vous pouvez donc appeler Notification
dans l'instance de Vue comme nous avons fait dans cette page.
Import à la demande
Importez Notification
:
import { Notification } from 'element-ui';
Dans ce cas vous devrez appeler Notification(options)
. Il existe aussi des méthodes pour chaque type, e.g. Notification.success(options)
. Vous pouvez appeler Notification.closeAll()
pour fermer manuellement toutes les instances.
Options
Attribut | Description | Type | Valeurs acceptées | Défaut |
---|---|---|---|---|
title | Titre de la notification. | string | — | — |
message | Message de la notification. | string/Vue.VNode | — | — |
dangerouslyUseHTMLString | Si message doit être traité comme du HTML. |
boolean | — | false |
type | Type de notification. | string | success/warning/info/error | — |
iconClass | Classe d'icône. Écrasé par type . |
string | — | — |
customClass | Nom de classe pour la notification. | string | — | — |
duration | Durée avant fermeture. Infinie si mise à 0. | number | — | 4500 |
position | Position de la notification. | string | top-right/top-left/bottom-right/bottom-left | top-right |
showClose | Si le bouton de fermeture doit être affiché. | boolean | — | true |
onClose | Callback de fermeture. | function | — | — |
onClick | Callback quand la notification est cliquée. | function | — | — |
offset | Décalage par rapport au bord de la page. Toutes les notifications arrivant au même moment devraient avoir le même décalage. | number | — | 0 |
Méthodes
Notification
et this.$notify
retourne l'instance actuelle de Notification. Pour fermer chaque instance manuellement, appelez la méthode close
.
Méthode | Description |
---|---|
close | Ferme la notification. |