消息提示 ​

用于在活动中显示反馈。与通知的不同之处在于，后者通常用于显示系统级的被动通知。

基础用法 ​

默认情况下显示在顶部，3 秒后消失。您可以使用 placement 属性来控制位置。

类型 ​

用于显示成功、警告、消息和错误活动的结果反馈。

朴素 2.6.3 ​

设置 plain 属性，消息的背景将变为朴素样式。

可关闭 ​

可以添加一个关闭按钮。

使用 HTML 字符串 ​

message 属性支持 HTML 片段。

分组 ​

合并具有相同内容的消息。

位置 2.11.0 ​

控制消息出现的位置。消息可以显示在视口的顶部 (默认) 或其他位置。

全局方法 ​

Element Plus 为 app.config.globalProperties 添加了一个全局方法 $message。因此，在 Vue 实例中，您可以像本页一样调用 Message。

局部导入 ​

import { ElMessage } from 'element-plus'

在这种情况下，您应该调用 ElMessage(options)。我们还为不同类型注册了方法，例如 ElMessage.success(options)。您可以调用 ElMessage.closeAll() 来手动关闭所有实例。

应用上下文继承 2.0.3 ​

现在，消息构造函数的第二个参数接受一个 context，它允许您将当前应用程序的上下文注入到消息中，从而允许您继承应用程序的所有属性。

您可以像这样使用它

import { getCurrentInstance } from 'vue'
import { ElMessage } from 'element-plus'

// in your setup method
const { appContext } = getCurrentInstance()!
ElMessage({}, appContext)

API ​

配置项 ​

方法 ​

Message 和 this.$message 返回当前的消息实例。要手动关闭实例，您可以在其上调用 close。

来源 ​

组件 • 样式 • 文档

贡献者 ​