element-plus/notification.md at eacd21f1184cf4fef22e809e0c1ffe2098bd0981

mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-15 01:41:20 +08:00

feat(docs): Notification code for composition (#2328 )

Co-authored-by: xing.wu <wuxing@bjca.org.cn>

2021-06-25 16:10:39 +08:00

12 KiB

Raw Blame History

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.

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

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

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

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

<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. 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="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

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.

12 KiB Raw Blame History