ElementPlus Message 消息提示

Message 消息提示

常用于主動(dòng)操作后的反饋提示。與 Notification 的區(qū)別是后者更多用于系統(tǒng)級(jí)通知的被動(dòng)提醒。

基礎(chǔ)用法

從頂部出現(xiàn)，3 秒后自動(dòng)消失。

Message 在配置上與 Notification 非常類似，所以部分 options 在此不做詳盡解釋，文末有 options 列表，可以結(jié)合 Notification 的文檔理解它們。Element Plus 注冊(cè)了一個(gè)$message方法用于調(diào)用，Message 可以接收一個(gè)字符串或一個(gè) VNode 作為參數(shù)，它會(huì)被顯示為正文內(nèi)容。

<template>
  <el-button :plain="true" @click="open">打開消息提示</el-button>
  <el-button :plain="true" @click="openVn">VNode</el-button>
</template>

<script>
  import { defineComponent, h } from 'vue'
  import { ElMessage } from 'element-plus'
  export default defineComponent({
    setup() {
      return {
        open() {
          ElMessage('只是一條消息提示')
        },
        openVn() {
          ElMessage({
            message: h('p', null, [
              h('span', null, '內(nèi)容可以是 '),
              h('i', { style: 'color: teal' }, 'VNode'),
            ]),
          })
        },
      }
    },
  })
</script>

不同狀態(tài)

用來顯示「成功、警告、消息、錯(cuò)誤」類的操作反饋。

當(dāng)需要自定義更多屬性時(shí)，Message 也可以接收一個(gè)對(duì)象為參數(shù)。比如，設(shè)置type字段可以定義不同的狀態(tài)，默認(rèn)為info。此時(shí)正文內(nèi)容以message的值傳入。同時(shí)，我們也為 Message 的各種 type 注冊(cè)了方法，可以在不傳入type字段的情況下像open4那樣直接調(diào)用。

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

<script>
  import { defineComponent } from 'vue'
  import { ElMessage } from 'element-plus'
  export default defineComponent({
    setup() {
      return {
        open1() {
          ElMessage.success({
            message: '恭喜你，這是一條成功消息',
            type: 'success',
          })
        },
        open2() {
          ElMessage.warning({
            message: '警告哦，這是一條警告消息',
            type: 'warning',
          })
        },
        open3() {
          ElMessage('這是一條消息提示')
        },
        open4() {
          ElMessage.error('錯(cuò)了哦，這是一條錯(cuò)誤消息')
        },
      }
    },
  })
</script>

可關(guān)閉

可以添加關(guān)閉按鈕。

默認(rèn)的 Message 是不可以被人工關(guān)閉的，如果需要可手動(dòng)關(guān)閉的 Message，可以使用showClose字段。此外，和 Notification 一樣，Message 擁有可控的duration，設(shè)置0為不會(huì)被自動(dòng)關(guān)閉，默認(rèn)為 3000 毫秒。

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

<script>
  import { defineComponent } from 'vue'
  import { ElMessage } from 'element-plus'

  export default defineComponent({
    setup() {
      return {
        open1() {
          ElMessage({
            showClose: true,
            message: '這是一條消息提示',
          })
        },

        open2() {
          ElMessage({
            showClose: true,
            message: '恭喜你，這是一條成功消息',
            type: 'success',
          })
        },

        open3() {
          ElMessage({
            showClose: true,
            message: '警告哦，這是一條警告消息',
            type: 'warning',
          })
        },

        open4() {
          ElMessage({
            showClose: true,
            message: '錯(cuò)了哦，這是一條錯(cuò)誤消息',
            type: 'error',
          })
        },
      }
    },
  })
</script>

文字居中

使用 center 屬性讓文字水平居中。

<template>
  <el-button :plain="true" @click="openCenter">文字居中</el-button>
</template>

<script>
  import { defineComponent } from 'vue'
  import { ElMessage } from 'element-plus'
  export default defineComponent({
    setup() {
      return {
        openCenter() {
          ElMessage({
            message: '居中的文字',
            center: true,
          })
        },
      }
    },
  })
</script>

使用 HTML 片段

message 屬性支持傳入 HTML 片段

將dangerouslyUseHTMLString屬性設(shè)置為 true，message 就會(huì)被當(dāng)作 HTML 片段處理。

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

<script>
  import { defineComponent } from 'vue'
  import { ElMessage } from 'element-plus'
  export default defineComponent({
    setup() {
      return {
        openHTML() {
          ElMessage({
            dangerouslyUseHTMLString: true,
            message: '<strong>這是 <i>HTML</i> 片段</strong>',
          })
        },
      }
    },
  })
</script>

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

全局方法

Element Plus 為 app.config.globalProperties 添加了全局方法 $message。因此在 vue instance 中可以采用在 method 中調(diào)用 this.$message方法喚起ElMessage。

單獨(dú)引用

import { ElMessage } from 'element-plus'
JS

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

Options

方法

調(diào)用 ElMessage 或 this.$message 會(huì)返回當(dāng)前 Message 的實(shí)例。如果需要手動(dòng)關(guān)閉實(shí)例，可以調(diào)用它的 close 方法。