消息提示组件
# 消息提示组件
官方地址 https://element.eleme.io/#/zh-CN/component/notification (opens new window)
# 一. 应用场景
常用于主动操作后的反馈提示。
# 二. 基本用法
$message()
接受一个对象,message
,设置通知的正文,接受一个String
或者VNode
。duration
,控制关闭的间隔,接受Number
,单位ms
,默认3000
。- 特别的,设置为
0
,表示不会自动关闭
- 特别的,设置为
<p>
<el-button :plain="true" @click="open">打开消息提示</el-button>
<el-button plain @click="openVN">VNode</el-button>
</p>
2
3
4
open() {
this.$message('这是一条消息提示')
},
openVN() {
const h = this.$createElement;
this.$message({
message: h('p', null, [
h('strong', null, '内容可以是'),
h('i', {style: 'color: teal'}, 'VNode')
]),
})
}
2
3
4
5
6
7
8
9
10
11
12
13
# 三. 通知类型
通知类型由 type
声明
success
info
warning
error
或者
$message.success
$message.info
$message.warning
$message.error
<p>
<el-button :plain="true" @click="open19">成功</el-button>
<el-button :plain="true" @click="open20">消息</el-button>
<el-button :plain="true" @click="open21">警告</el-button>
<el-button :plain="true" @click="open22">错误</el-button>
</p>
2
3
4
5
6
// 调用方式一,type
open19() {
this.$message({
message: '这是一条成功的消息',
type: 'success'
})
},
open20() {
this.$message({
message: '这是一条消息提示',
type: 'info'
})
},
// 调用方式二,this.$message.warning
open21() {
this.$message.warning({
message: '这是一条警告消息'
})
},
open22() {
this.$message.error({
message: '这是一条错误消息'
})
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
# 四. 偏移量
偏移量 offset
,设置 Message 组件具体屏幕顶部的具体。
注意:在同一时刻,所有的 Message 实例应当具有一个相同的偏移量。
<el-button plain @click="open23">成功</el-button>
open23() {
this.$message.success({
message: '距离顶部200px',
offset: 200,
})
}
2
3
4
5
6
# 五. 使用 HTML 代码片段
message
属性虽然支持传入 HTML 片段,但是在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 XSS 攻击。 因此在dangerouslyUseHTMLString
打开的情况下, 请确保 message 的内容是可信的,永远不要将用户提交的内容赋值给 message 属性。
<p>
<el-button plain @click="open24">成功</el-button>
</p>
2
3
open24() {
this.$message({
message: '<strong>使用HTML代码片段</strong>',
dangerouslyUseHTMLString: true,
type: 'info'
})
}
2
3
4
5
6
7
# 六. 开启关闭按钮
关闭按钮的显示与否由 showClose
指定。
<el-button type="primary" native-type="button" plain @click="open25">开启关闭按钮</el-button>
open25() {
this.$message({
message: '开启关闭按钮',
type: 'info',
showClose: true,
})
}
2
3
4
5
6
7
# 七. 文字内容居中
文字内容居中由 center
指定。
<p>
<el-button :plain="true" @click="open27">文字内容居中</el-button>
</p>
2
3
open27() {
this.$message({
message: '内容居中',
type: 'success',
center: true,
})
}
2
3
4
5
6
7
# 八. 自定义图标 iconClass
跟 notification
组件有点区别,message 组件的 iconClass
会覆盖 type
,而且也不会继承它的情境色。
<p>
<el-button :plain="true" @click="open26">自定义图标</el-button>
</p>
2
3
open14() {
this.$notify({
title: 'Success',
message: '这是一条成功的消息',
iconClass: 'el-icon-delete', // 如果设置了type,iconClass会覆盖它,并且继承它的情境色
type: 'success',
})
}
2
3
4
5
6
7
8
# 九. onClose
onClose
,组件关闭时的回调函数。
<p>
<el-button :plain="true" @click="open30">onClose指定关闭时的回调函数</el-button>
</p>
2
3
open30() {
this.$message.success({
message: 'onClose指定关闭时的回调函数',
duration: 3000,
onClose: ()=>console.log('关闭啦'),
})
}
2
3
4
5
6
7
# 十. close 实例方法
调用 Message
或 this.$message
会返回当前 Message
的实例。如果需要手动关闭实例,可以调用它的 close
方法。
<p>
<el-button :plain="true" @click="open31">close实例方法</el-button>
</p>
2
3
open31() {
let closed = this.$message({
message: 'close实例方法',
duration: 0,
});
setTimeout(()=>closed.close(), 1000);
}
2
3
4
5
6
7
# 十一. 全局引入
ElementUI 在 Vue.prototype
中注册了全局方法 $message
,所以在 Vue
实例中可以采用 this.$message
方式调用 Message 组件。
# 十二. 单独引用
import { Message } from 'element-ui;
此时调用方法为 Message(options)
,也为每个 type
定义了各自的方法,如 Message.success(options)
,并且可以调用 Message.closeAll()
手动关闭所有实例。
# 十三. 方法
调用 Message
或 this.$message
会返回当前 Message 的实例。如果需要手动关闭实例,可以调用它的 close
方法。
方法名 | 说明 |
---|---|
close | 关闭当前的 Message |