Message 消息提示

常用于主动操作后的反馈提示。 与 Notification 的区别是后者更多用于系统级通知的被动提醒。

基础用法

从顶部出现，3 秒后自动消失。

Message 在配置上与 Notification 非常类似，所以部分 options 在此不做详尽解释。 文末有 options 列表，可以结合 Notification 的文档理解它们。 Element Plus 注册了一个全局的 $message方法用于调用。 Message 可以接收一个字符串或一个 VNode 作为参数，它会被显示为正文内容。

<template>
  <el-button :plain="true" @click="open">Show message</el-button>
  <el-button :plain="true" @click="openVn">VNode</el-button>
</template>
<script lang="ts" setup>
import { h } from 'vue'
import { ElMessage } from 'element-plus'
const open = () => {
  ElMessage('this is a message.')
}
const openVn = () => {
  ElMessage({
    message: h('p', null, [
      h('span', null, 'Message can be '),
      h('i', { style: 'color: teal' }, 'VNode'),
    ]),
  })
}
</script>

不同状态

用来显示「成功、警告、消息、错误」类的操作反馈。

当需要自定义更多属性时，Message 也可以接收一个对象为参数。 比如，设置 type 字段可以定义不同的状态，默认为info。 此时正文内容以 message 的值传入。 同时，我们也为 Message 的各种 type 注册了方法，可以在不传入 type 字段的情况下像 open4 那样直接调用。

<template>
  <el-button :plain="true" @click="open2">success</el-button>
  <el-button :plain="true" @click="open3">warning</el-button>
  <el-button :plain="true" @click="open1">message</el-button>
  <el-button :plain="true" @click="open4">error</el-button>
</template>
<script lang="ts" setup>
import { ElMessage } from 'element-plus'
const open1 = () => {
  ElMessage('this is a message.')
}
const open2 = () => {
  ElMessage({
    message: 'Congrats, this is a success message.',
    type: 'success',
  })
}
const open3 = () => {
  ElMessage({
    message: 'Warning, this is a warning message.',
    type: 'warning',
  })
}
const open4 = () => {
  ElMessage.error('Oops, this is a error message.')
}
</script>

可关闭的消息提示

可以添加关闭按钮。

默认的 Message 是不可以被人工关闭的。 如果你需要手动关闭功能，你可以把 showClose 设置为 true 此外，和 Notification 一样，Message 拥有可控的 duration， 默认的关闭时间为 3000 毫秒，当把这个属性的值设置为0便表示该消息不会被自动关闭。

<template>
  <el-button :plain="true" @click="open1">message</el-button>
  <el-button :plain="true" @click="open2">success</el-button>
  <el-button :plain="true" @click="open3">warning</el-button>
  <el-button :plain="true" @click="open4">error</el-button>
</template>
<script lang="ts" setup>
import { ElMessage } from 'element-plus'
const open1 = () => {
  ElMessage({
    showClose: true,
    message: 'This is a message.',
  })
}
const open2 = () => {
  ElMessage({
    showClose: true,
    message: 'Congrats, this is a success message.',
    type: 'success',
  })
}
const open3 = () => {
  ElMessage({
    showClose: true,
    message: 'Warning, this is a warning message.',
    type: 'warning',
  })
}
const open4 = () => {
  ElMessage({
    showClose: true,
    message: 'Oops, this is a error message.',
    type: 'error',
  })
}
</script>

文字居中

使用 center 属性让文字水平居中。

<template>
  <el-button plain @click="openCenter">Centered text</el-button>
</template>
<script lang="ts" setup>
import { ElMessage } from 'element-plus'
const openCenter = () => {
  ElMessage({
    showClose: true,
    message: 'Centered text',
    center: true,
  })
}
</script>

使用 HTML 片段作为正文内容

message 还支持使用 HTML 字符串作为正文内容。

将dangerouslyUseHTMLString属性设置为 true,message 就会被当作 HTML 片段处理。

<template>
  <el-button :plain="true" @click="openHTML">Use HTML String</el-button>
</template>
<script lang="ts" setup>
import { ElMessage } from 'element-plus'
const openHTML = () => {
  ElMessage({
    dangerouslyUseHTMLString: true,
    message: '<strong>This is <i>HTML</i> string</strong>',
  })
}
</script>

WARNING

message 属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击 。 因此在 dangerouslyUseHTMLString 打开的情况下，请确保 message 的内容是可信的，永远不要将用户提交的内容赋值给 message 属性。

grouping

合并相同内容的消息。

设置 grouping 为 true，内容相同的 message 将被合并。

<template>
  <el-button :plain="true" @click="open">Show message</el-button>
</template>
<script lang="ts" setup>
import { ElMessage } from 'element-plus'
const open = () => {
  ElMessage({
    message: 'this is a message.',
    grouping: true,
    type: 'success',
  })
}
</script>

全局方法

Element Plus 为 app.config.globalProperties 添加了全局方法 $message。 因此在 vue 实例中你可以使用当前页面中的调用方式调用 Message

单独引用

import { ElMessage } from 'element-plus'

此时调用方法为 ElMessage(options)。 我们也为每个 type 定义了各自的方法，如 ElMessage.success(options)。 并且可以调用 ElMessage.closeAll() 手动关闭所有实例。

应用程序上下文继承 >= 2.0.3

现在 Message 接受一条 context 作为消息构造器的第二个参数，允许你将当前应用的上下文注入到 Message 中，这将允许你继承应用程序的所有属性。

你可以像这样使用它：

TIP

如果您全局注册了 ElMessage 组件，它将自动继承应用的上下文环境。

import { getCurrentInstance } from 'vue'
import { ElMessage } from 'element-plus'
// 在你的 setup 方法中
const { appContext } = getCurrentInstance()!
ElMessage({}, appContext)

Message API

Message 配置项

Message 方法

调用 Message 或 this.$message 会返回当前 Message 的实例。 如果需要手动关闭实例，可以调用它的 close 方法。

源代码

组件 • 文档

贡献者

三咲智子

云游君

JeremyWuuuuu

btea

kooriookami

Aex

C.Y.Kun

zz

gjfei

Lete

Delyan Haralanov

Xc

Alan Wang

bqy

Herrington Darkholme

表弟

CodeSpikeX

iceman

LIUCHAO

msidolphin

on the field of hope

Ryan2128

Hades-li

啝裳