§ Message 消息提示

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

基础用法

从顶部出现,3 秒后自动消失。
显示代码

不同状态

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

可关闭

可以添加关闭按钮。
显示代码

文字居中

使用 center 属性让文字水平居中。
显示代码

使用 HTML 片段

message 属性支持传入 HTML 片段
显示代码

DANGER

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

§ 全局方法

Element 为 Vue.prototype 添加了全局方法 $message。因此在 vue instance 中可以采用本页面中的方式调用 Message。

§ 单独引用

单独引入 Message:

import { Message } from 'element-ui';
1

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

Options

Methods

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

最后更新于: 4/15/2022, 2:41:22 PM