消息提示组件

# 消息提示组件

官方地址 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>

1
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')
		]),
	})
}

1
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>

1
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: '这是一条错误消息'
	})
}

1
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,
	})
}

1
2
3
4
5
6

# 五. 使用 HTML 代码片段

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

<p>
	<el-button plain @click="open24">成功</el-button>
</p>

1
2
3

open24() {
	this.$message({
		message: '<strong>使用HTML代码片段</strong>',
		dangerouslyUseHTMLString: true,
		type: 'info'
	})
}

1
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,
	})
}

1
2
3
4
5
6
7

# 七. 文字内容居中

文字内容居中由 center 指定。

<p>
	<el-button :plain="true" @click="open27">文字内容居中</el-button>
</p>

1
2
3

open27() {
	this.$message({
		message: '内容居中',
		type: 'success',
		center: true,
	})
}

1
2
3
4
5
6
7

# 八. 自定义图标 iconClass

跟 notification 组件有点区别，message 组件的 iconClass 会覆盖 type，而且也不会继承它的情境色。

<p>
  <el-button :plain="true" @click="open26">自定义图标</el-button>
</p>

1
2
3

open14() {
	this.$notify({
		title: 'Success',
		message: '这是一条成功的消息',
		iconClass: 'el-icon-delete',  // 如果设置了type，iconClass会覆盖它，并且继承它的情境色
		type: 'success',
	})
}

1
2
3
4
5
6
7
8

# 九. onClose

onClose，组件关闭时的回调函数。

<p>
	<el-button :plain="true" @click="open30">onClose指定关闭时的回调函数</el-button>
</p>

1
2
3

open30() {
	this.$message.success({
		message: 'onClose指定关闭时的回调函数',
		duration: 3000,
		onClose: ()=>console.log('关闭啦'),
	})
}

1
2
3
4
5
6
7

# 十. close 实例方法

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

<p>
	<el-button :plain="true" @click="open31">close实例方法</el-button>
</p>

1
2
3

open31() {
	let closed = this.$message({
		message: 'close实例方法',
		duration: 0,
	});
	setTimeout(()=>closed.close(), 1000);
}

1
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

#Element

上次更新: 2022/07/08, 17:40:08

← 全选操作分析如何解决弹窗重复弹出→