ElementPlus Notification 通知

Notification 通知

懸浮出現(xiàn)在頁面角落，顯示全局的通知提醒消息。

基本用法

適用性廣泛的通知欄

Notification 組件提供通知功能，Element Plus 注冊了$notify方法，接收一個options字面量參數(shù)，在最簡單的情況下，你可以設置title字段和message字段，用于設置通知的標題和正文。默認情況下，經(jīng)過一段時間后 Notification 組件會自動關(guān)閉，但是通過設置duration，可以控制關(guān)閉的時間間隔，特別的是，如果設置為0，則不會自動關(guān)閉。注意：duration接收一個Number，單位為毫秒，默認為4500。

<template>
  <el-button plain @click="open1"> 可自動關(guān)閉 </el-button>
  <el-button plain @click="open2"> 不會自動關(guān)閉 </el-button>
</template>

<script>
  import { h } from 'vue'

  export default {
    methods: {
      open1() {
        this.$notify({
          title: '標題名稱',
          message: h(
            'i',
            { style: 'color: teal' },
            '這是提示文案這是提示文案這是提示文案這是提示文案這是提示文案這是提示文案這是提示文案這是提示文案'
          ),
        })
      },

      open2() {
        this.$notify({
          title: '提示',
          message: '這是一條不會自動關(guān)閉的消息',
          duration: 0,
        })
      },
    },
  }
</script>

帶有傾向性

帶有 icon，常用來顯示「成功、警告、消息、錯誤」類的系統(tǒng)消息

Element Plus 為 Notification 組件準備了四種通知類型：success, warning, info, error。通過type字段來設置，除此以外的值將被忽略。同時，我們也為 Notification 的各種 type 注冊了方法，可以在不傳入type字段的情況下像open3和open4那樣直接調(diào)用。

<template>
  <el-button plain @click="open1"> 成功 </el-button>
  <el-button plain @click="open2"> 警告 </el-button>
  <el-button plain @click="open3"> 消息 </el-button>
  <el-button plain @click="open4"> 錯誤 </el-button>
</template>

<script>
  export default {
    methods: {
      open1() {
        this.$notify({
          title: '成功',
          message: '這是一條成功的提示消息',
          type: 'success',
        })
      },

      open2() {
        this.$notify({
          title: '警告',
          message: '這是一條警告的提示消息',
          type: 'warning',
        })
      },

      open3() {
        this.$notify.info({
          title: '消息',
          message: '這是一條消息的提示消息',
        })
      },

      open4() {
        this.$notify.error({
          title: '錯誤',
          message: '這是一條錯誤的提示消息',
        })
      },
    },
  }
</script>

自定義彈出位置

可以讓 Notification 從屏幕四角中的任意一角彈出

使用position屬性定義 Notification 的彈出位置，支持四個選項：top-right、top-left、bottom-right、bottom-left，默認為top-right。

<template>
  <el-button plain @click="open1"> 右上角 </el-button>
  <el-button plain @click="open2"> 右下角 </el-button>
  <el-button plain @click="open3"> 左下角 </el-button>
  <el-button plain @click="open4"> 左上角 </el-button>
</template>

<script>
  export default {
    methods: {
      open1() {
        this.$notify({
          title: '自定義位置',
          message: '右上角彈出的消息',
        })
      },

      open2() {
        this.$notify({
          title: '自定義位置',
          message: '右下角彈出的消息',
          position: 'bottom-right',
        })
      },

      open3() {
        this.$notify({
          title: '自定義位置',
          message: '左下角彈出的消息',
          position: 'bottom-left',
        })
      },

      open4() {
        this.$notify({
          title: '自定義位置',
          message: '左上角彈出的消息',
          position: 'top-left',
        })
      },
    },
  }
</script>

帶有偏移

讓 Notification 偏移一些位置

Notification 提供設置偏移量的功能，通過設置 offset 字段，可以使彈出的消息距屏幕邊緣偏移一段距離。注意在同一時刻，所有的 Notification 實例應當具有一個相同的偏移量。

<template>
  <el-button plain @click="open"> 偏移的消息 </el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$notify({
          title: '偏移',
          message: '這是一條帶有偏移的提示消息',
          offset: 100,
        })
      },
    },
  }
</script>

使用 HTML 片段

message 屬性支持傳入 HTML 片段

將dangerouslyUseHTMLString屬性設置為 true，message 就會被當作 HTML 片段處理。

<template>
  <el-button plain @click="open"> 使用 HTML 片段 </el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$notify({
          title: 'HTML 片段',
          dangerouslyUseHTMLString: true,
          message: '<strong>這是 <i>HTML</i> 片段</strong>',
        })
      },
    },
  }
</script>

message 屬性雖然支持傳入 HTML 片段，但是在網(wǎng)站上動態(tài)渲染任意 HTML 是非常危險的，因為容易導致 XSS 攻擊。因此在 dangerouslyUseHTMLString 打開的情況下，請確保 message 的內(nèi)容是可信的，永遠不要將用戶提交的內(nèi)容賦值給 message 屬性。

隱藏關(guān)閉按鈕

可以不顯示關(guān)閉按鈕

將showClose屬性設置為false即可隱藏關(guān)閉按鈕。

<template>
  <el-button plain @click="open"> 隱藏關(guān)閉按鈕 </el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$notify.success({
          title: 'Info',
          message: '這是一條沒有關(guān)閉按鈕的消息',
          showClose: false,
        })
      },
    },
  }
</script>

全局方法

Element Plus 為 app.config.globalProperties 添加了全局方法 $notify。因此在 vue instance 中可以采用本頁面中的方式調(diào)用 Notification。

單獨引用

import { ElNotification } from 'element-plus'
JS

此時調(diào)用方法為 ElNotification(options)。我們也為每個 type 定義了各自的方法，如 ElNotification.success(options)。并且可以調(diào)用 ElNotification.closeAll() 手動關(guān)閉所有實例。

Options

方法

調(diào)用 Notification 或 this.$notify 會返回當前 Notification 的實例。如果需要手動關(guān)閉實例，可以調(diào)用它的 close 方法。