ElementUI 消息提示组件Message_element message

官方地址

https://element.eleme.io/#/zh-CN/component/notification

应用场景

常用于主动操作后的反馈提示

基本用法

• $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
14
15
16
17
18
19
20
21
22

通知类型

通知类型由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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

偏移量

偏移量offset,设置Message组件具体屏幕顶部的具体
注意在同一时刻，所有的 Message实例应当具有一个相同的偏移量。

  <el-button
	plain
	@click="open23">
	成功
  </el-button>
1
2
3
4
5

open23() {
	
	this.$message.success({
		
		message: '距离顶部200px',
		offset: 200,
		
	})

},
1
2
3
4
5
6
7
8
9
10

使用HTML代码片段

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

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

  </p>	
1
2
3
4
5

open24() {
	
	this.$message({
		
		message: '<strong>使用HTML代码片段</strong>',
		dangerouslyUseHTMLString: true,
		type: 'info'
		
	})
	
},
1
2
3
4
5
6
7
8
9
10
11

开启关闭按钮

关闭按钮的显示与否由showClose指定

 <el-button
   type="primary"
native-type="button"
plain
@click="open25">
开启关闭按钮
 </el-button>
1
2
3
4
5
6
7

open25() {
	
	this.$message({
		
		message: '开启关闭按钮',
		type: 'info',
		showClose: true,

	})

},
1
2
3
4
5
6
7
8
9
10
11

文字内容居中

文字内容居中由center指定

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

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

	})

},
1
2
3
4
5
6
7
8
9
10
11

自定义图标iconClass

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

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

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

	})
	
},
1
2
3
4
5
6
7
8
9
10
11
12

onClose

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

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

open30() {
	
	this.$message.success({
		
		message: 'onClose指定关闭时的回调函数',
		duration: 3000,
		onClose: ()=>console.log('关闭啦'),
		
	})
	
},
1
2
3
4
5
6
7
8
9
10
11

close实例方法

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

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

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

}

1
2
3
4
5
6
7
8
9
10
11
12
13

全局引入

ElementUI在Vue.prototype中注册了全局方法$message，所以在Vue实例中可以采用this.$message方式调用Message组件

单独引用

import {Message} from 'element-ui; 此时调用方法为Message(options)，也为每个type定义了各自的方法，如Message.success(options)，并且可以调用Message.closeAll()手动关闭所有实例

Options

方法

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