mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-15 18:01:24 +08:00
522 lines
12 KiB
Markdown
522 lines
12 KiB
Markdown
## Notification
|
|
|
|
Affiche une notification globale dans un coin de la page.
|
|
|
|
### Usage
|
|
|
|
:::demo Element Plus enregistre la méthode `$notify` qui reçoit un objet en paramètre. Dans le cas le plus simple, vous pouvez simplement configurer 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` en millisecondes.
|
|
|
|
```html
|
|
<template>
|
|
<el-button
|
|
plain
|
|
@click="open1">
|
|
Se ferme automatiquement
|
|
</el-button>
|
|
<el-button
|
|
plain
|
|
@click="open2">
|
|
Ne se ferme pas automatiquement
|
|
</el-button>
|
|
</template>
|
|
|
|
<script>
|
|
import { h } from 'vue';
|
|
|
|
export default {
|
|
methods: {
|
|
open1() {
|
|
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>
|
|
<!--
|
|
<setup>
|
|
|
|
import { defineComponent, h } from 'vue';
|
|
import { ElNotification } from 'element-plus';
|
|
|
|
export default defineComponent({
|
|
setup() {
|
|
|
|
const open1 = () => {
|
|
ElNotification({
|
|
title: 'Titre',
|
|
message: h('i', { style: 'color: teal' }, 'Ceci est un rappel'),
|
|
});
|
|
};
|
|
|
|
const open2 = () => {
|
|
ElNotification({
|
|
title: 'Prompt',
|
|
message: 'Ceci est un message qui ne se ferme pas',
|
|
duration: 0,
|
|
});
|
|
};
|
|
|
|
return {
|
|
open1,
|
|
open2,
|
|
};
|
|
},
|
|
});
|
|
|
|
</setup>
|
|
-->
|
|
```
|
|
:::
|
|
|
|
### Types
|
|
|
|
Nous fournissons quatre types: succès, avertissement, information et erreur.
|
|
|
|
:::demo Element Plus 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 `open3` et `open4`, qui ne nécessitent donc pas le champs `type`.
|
|
```html
|
|
<template>
|
|
<el-button
|
|
plain
|
|
@click="open1">
|
|
Success
|
|
</el-button>
|
|
<el-button
|
|
plain
|
|
@click="open2">
|
|
Warning
|
|
</el-button>
|
|
<el-button
|
|
plain
|
|
@click="open3">
|
|
Info
|
|
</el-button>
|
|
<el-button
|
|
plain
|
|
@click="open4">
|
|
Error
|
|
</el-button>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
methods: {
|
|
open1() {
|
|
this.$notify({
|
|
title: 'Success',
|
|
message: 'Ceci est un message de succès',
|
|
type: 'success'
|
|
});
|
|
},
|
|
|
|
open2() {
|
|
this.$notify({
|
|
title: 'Warning',
|
|
message: 'Ceci est un avertissement',
|
|
type: 'warning'
|
|
});
|
|
},
|
|
|
|
open3() {
|
|
this.$notify.info({
|
|
title: 'Info',
|
|
message: 'Ceci est une information'
|
|
});
|
|
},
|
|
|
|
open4() {
|
|
this.$notify.error({
|
|
title: 'Error',
|
|
message: 'Ceci est une erreur'
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<!--
|
|
<setup>
|
|
|
|
import { defineComponent } from 'vue';
|
|
import { ElNotification } from 'element-plus';
|
|
|
|
export default defineComponent({
|
|
setup() {
|
|
|
|
const open1 = () => {
|
|
ElNotification({
|
|
title: 'Success',
|
|
message: 'Ceci est un message de succès',
|
|
type: 'success',
|
|
});
|
|
};
|
|
|
|
const open2 = () => {
|
|
ElNotification({
|
|
title: 'Warning',
|
|
message: 'Ceci est un avertissement',
|
|
type: 'warning',
|
|
});
|
|
};
|
|
|
|
const open3 = () => {
|
|
ElNotification({
|
|
title: 'Info',
|
|
message: 'Ceci est une information',
|
|
});
|
|
};
|
|
|
|
const open4 = () => {
|
|
ElNotification({
|
|
title: 'Error',
|
|
message: 'Ceci est une erreur',
|
|
});
|
|
};
|
|
return {
|
|
open1,
|
|
open2,
|
|
open3,
|
|
open4,
|
|
};
|
|
},
|
|
});
|
|
|
|
</setup>
|
|
-->
|
|
```
|
|
:::
|
|
|
|
### 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`.
|
|
```html
|
|
<template>
|
|
<el-button
|
|
plain
|
|
@click="open1">
|
|
Top Right
|
|
</el-button>
|
|
<el-button
|
|
plain
|
|
@click="open2">
|
|
Bottom Right
|
|
</el-button>
|
|
<el-button
|
|
plain
|
|
@click="open3">
|
|
Bottom Left
|
|
</el-button>
|
|
<el-button
|
|
plain
|
|
@click="open4">
|
|
Top Left
|
|
</el-button>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
methods: {
|
|
open1() {
|
|
this.$notify({
|
|
title: 'Custom Position',
|
|
message: 'Je suis dans le coin supérieur droit'
|
|
});
|
|
},
|
|
|
|
open2() {
|
|
this.$notify({
|
|
title: 'Custom Position',
|
|
message: 'Je suis dans le coin inférieur droit',
|
|
position: 'bottom-right'
|
|
});
|
|
},
|
|
|
|
open3() {
|
|
this.$notify({
|
|
title: 'Custom Position',
|
|
message: 'Je suis dans le coin inférieur gauche',
|
|
position: 'bottom-left'
|
|
});
|
|
},
|
|
|
|
open4() {
|
|
this.$notify({
|
|
title: 'Custom Position',
|
|
message: 'Je suis dans le coin supérieur gauche',
|
|
position: 'top-left'
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<!--
|
|
<setup>
|
|
|
|
import { defineComponent } from 'vue';
|
|
import { ElNotification } from 'element-plus';
|
|
|
|
export default defineComponent({
|
|
setup() {
|
|
|
|
const open1 = () => {
|
|
ElNotification({
|
|
title: 'Custom Position',
|
|
message: 'Je suis dans le coin supérieur droit',
|
|
});
|
|
};
|
|
|
|
const open2 = () => {
|
|
ElNotification({
|
|
title: 'Custom Position',
|
|
message: 'Je suis dans le coin inférieur droit',
|
|
position: 'bottom-right',
|
|
});
|
|
};
|
|
|
|
const open3 = () => {
|
|
ElNotification({
|
|
title: 'Custom Position',
|
|
message: 'Je suis dans le coin inférieur gauche',
|
|
position: 'bottom-left',
|
|
});
|
|
};
|
|
|
|
const open4 = () => {
|
|
ElNotification({
|
|
title: 'Custom Position',
|
|
message: 'Je suis dans le coin supérieur gauche',
|
|
position: 'top-left',
|
|
});
|
|
};
|
|
return {
|
|
open1,
|
|
open2,
|
|
open3,
|
|
open4,
|
|
};
|
|
},
|
|
});
|
|
|
|
</setup>
|
|
-->
|
|
```
|
|
:::
|
|
|
|
### 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.
|
|
```html
|
|
<template>
|
|
<el-button
|
|
plain
|
|
@click="open">
|
|
Notification avec décalage
|
|
</el-button>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
methods: {
|
|
open() {
|
|
this.$notify.success({
|
|
title: 'Success',
|
|
message: 'Ceci est un message de succès',
|
|
offset: 100
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<!--
|
|
<setup>
|
|
|
|
import { defineComponent } from 'vue';
|
|
import { ElNotification } from 'element-plus';
|
|
|
|
export default defineComponent({
|
|
setup() {
|
|
|
|
const open = () => {
|
|
ElNotification.success({
|
|
title: 'Success',
|
|
message: 'Ceci est un message de succès',
|
|
offset: 100,
|
|
});
|
|
};
|
|
|
|
return {
|
|
open,
|
|
};
|
|
},
|
|
});
|
|
|
|
</setup>
|
|
-->
|
|
```
|
|
:::
|
|
|
|
### Utiliser du HTML
|
|
|
|
L'attribut `message` supporte le HTML.
|
|
|
|
:::demo Mettez `dangerouslyUseHTMLString` à true et `message` sera traité comme du HTML.
|
|
|
|
```html
|
|
<template>
|
|
<el-button
|
|
plain
|
|
@click="open">
|
|
Utiliser du HTML
|
|
</el-button>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
methods: {
|
|
open() {
|
|
this.$notify({
|
|
title: 'HTML String',
|
|
dangerouslyUseHTMLString: true,
|
|
message: '<strong>Ceci est du <i>HTML</i></strong>'
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<!--
|
|
<setup>
|
|
|
|
import { defineComponent } from 'vue';
|
|
import { ElNotification } from 'element-plus';
|
|
|
|
export default defineComponent({
|
|
setup() {
|
|
|
|
const open = () => {
|
|
ElNotification({
|
|
title: 'HTML String',
|
|
dangerouslyUseHTMLString: true,
|
|
message: '<strong>Ceci est du <i>HTML</i></strong>',
|
|
});
|
|
};
|
|
|
|
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.
|
|
:::
|
|
|
|
### 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.
|
|
|
|
```html
|
|
<template>
|
|
<el-button
|
|
plain
|
|
@click="open">
|
|
Bouton de fermeture caché
|
|
</el-button>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
methods: {
|
|
open() {
|
|
this.$notify.success({
|
|
title: 'Info',
|
|
message: 'Ceci est un message sans bouton de fermeture',
|
|
showClose: false
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<!--
|
|
<setup>
|
|
|
|
import { defineComponent } from 'vue';
|
|
import { ElNotification } from 'element-plus';
|
|
|
|
export default defineComponent({
|
|
setup() {
|
|
|
|
const open = () => {
|
|
ElNotification.success({
|
|
title: 'Info',
|
|
message: 'Ceci est un message sans bouton de fermeture',
|
|
showClose: false,
|
|
});
|
|
};
|
|
|
|
return {
|
|
open,
|
|
};
|
|
},
|
|
});
|
|
|
|
</setup>
|
|
-->
|
|
```
|
|
:::
|
|
|
|
### Méthode globale
|
|
|
|
Element Plus ajoute la méthode `$notify` à `app.config.globalProperties`. Vous pouvez donc appeler `Notification` dans l'instance de Vue comme nous avons fait dans cette page.
|
|
|
|
### Import à la demande
|
|
|
|
```javascript
|
|
import { ElNotification } from 'element-plus';
|
|
```
|
|
|
|
Dans ce cas vous devrez appeler `ElNotification(options)`. Il existe aussi des méthodes pour chaque type, e.g. `ElNotification.success(options)`. Vous pouvez appeler `ElNotification.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. |
|