常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。
从顶部出现,3 秒后自动消失。
Message 在配置上与 Notification 非常类似,所以部分 options 在此不做详尽解释,文末有 options 列表,可以结合 Notification 的文档理解它们。
open() {
Message("这是一条消息提示");
}
render() {
return <Button plain={true} onClick={this.open.bind(this)}>打开消息提示</Button>
}
用来显示「成功、警告、消息、错误」类的操作反馈。
当需要自定义更多属性时,Message 也可以接收一个对象为参数。比如,设置type
字段可以定义不同的状态,默认为info
。此时正文内容以message
的值传入。同时,我们也为 Message 的各种 type 注册了方法,可以在不传入type
字段的情况下像open4
那样直接调用。
open() {
Message({
message: "恭喜你,这是一条成功消息",
type: "success"
});
}
open2() {
Message({
message: "警告哦,这是一条警告消息",
type: "warning"
});
}
open3() {
Message("这是一条消息提示");
}
open4() {
Message.error("错了哦,这是一条错误消息");
}
render() {
return (
<div>
<Button plain={true} onClick={this.open.bind(this)}>成功</Button>
<Button plain={true} onClick={this.open2.bind(this)}>警告</Button>
<Button plain={true} onClick={this.open3.bind(this)}>消息</Button>
<Button plain={true} onClick={this.open4.bind(this)}>错误</Button>
</div>
)
}
可以添加关闭按钮。
默认的 Message 是不可以被人工关闭的,如果需要可手动关闭的 Message,可以使用showClose
字段。此外,和 Notification 一样,Message 拥有可控的duration
,设置0
为不会被自动关闭,默认为 3000 毫秒。
open5() {
Message({
showClose: true,
message: "恭喜你,这是一条成功消息",
type: "success"
});
}
open6() {
Message({
showClose: true,
message: "警告哦,这是一条警告消息",
type: "warning"
});
}
open7() {
Message({
showClose: true,
message: "这是一条消息提示",
type: "info"
});
}
open8() {
Message({
showClose: true,
message: "错了哦,这是一条错误消息",
type: "error"
});
}
render() {
return (
<div>
<Button plain={true} onClick={this.open5.bind(this)}>成功</Button>
<Button plain={true} onClick={this.open6.bind(this)}>警告</Button>
<Button plain={true} onClick={this.open7.bind(this)}>消息</Button>
<Button plain={true} onClick={this.open8.bind(this)}>错误</Button>
</div>
)
}
单独引入 Message
:
import { Message } from "element-react";
此时调用方法为 Message(options)
。我们也为每个 type 定义了各自的方法,如 Message.success(options)
。
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
message | 消息文字 | string/ReactElement | — | — |
type | 主题 | string | success/warning/info/error | info |
iconClass | 自定义图标的类名,会覆盖 type |
string | — | — |
customClass | 自定义类名 | string | — | — |
duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | — | 3000 |
showClose | 是否显示关闭按钮 | boolean | — | false |
onClose | 关闭时的回调函数, 参数为被关闭的 message 实例 | function | — | — |
调用 Message
或 this.$message
会返回当前 Message 的实例。如果需要手动关闭实例,可以调用它的 close
方法。
方法名 | 说明 |
---|---|
close | 关闭当前的 Message |
Collapse 折叠面板通过折叠面板收纳内容区域基础用法可同时展开多个面板,面板之间不影响templateel-collapse v-model="activeNa...
创建第一个 Bootstrap 4 页面当你成功安装好 Bootstrap4 后,就可以开始创建 Bootstrap4 的第一个页面了。添加HTML5doctypeBoots...
什么是Axios?Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。特性从浏览器中创建XMLHttpRequests从 node....
xAxis.min |number, string, function[ default: null ]坐标轴刻度最小值。可以设置成特殊值'dataMin',此时取数据在该...
Highcharts 双轴车速表Highcharts 测量图以下实例演示了双轴车速表。我们在前面的章节已经了解了 Highcharts 基本配置语法。接下...
Highcharts 堆叠3D柱形图Highcharts 3D图以下实例演示了堆叠3D柱形图。我们在前面的章节已经了解了 Highcharts 基本配置语法。接...
Angular包格式本文档描述了Angular包格式(APF)。APF是针对npm包结构和格式的Angular专用规范,所有第一方Angular包(@angular/...
准备从AngularJS升级注意:本指南仅仅适用于从AngularJS升级和注重性能的升级。本指南中提到的升级指南使用的是已弃用的快速上手...
AngularJS 动画AngularJS 提供了动画效果,可以配合 CSS 使用。AngularJS 使用动画需要引入 angular-animate.min.js 库。script ...