ElementUI 消息提示组件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>

open() {
	
	this.$message('这是一条消息提示')
	
},

openVN() {
	
	const h = this.$createElement;
	
	this.$message({
		
		message: h('p', null, [
		
			h('strong', null, '内容可以是'),
			h('i', {style: 'color: teal'}, 'VNode')
		
		]),

	})
	
},

通知类型

通知类型由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>		

// 调用方式一，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: '这是一条错误消息'
		
	})
	
},

偏移量

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

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

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

},

使用HTML代码片段

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

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

  </p>	

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

开启关闭按钮

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

 <el-button
   type="primary"
native-type="button"
plain
@click="open25">
开启关闭按钮
 </el-button>

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

	})

},

文字内容居中

文字内容居中由center指定

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

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

	})

},

自定义图标iconClass

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

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

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

	})
	
},

onClose

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

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

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

close实例方法

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

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

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

}

全局引入

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

单独引用

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

Options

参数	说明	类型	可选值	默认值
message	消息文字	string / VNode	—	—
type	主题	string	success/warning/info/error	info
iconClass	自定义图标的类名，会覆盖 type	string	—	—
dangerouslyUseHTMLString	是否将 message 属性作为 HTML 片段处理	boolean	—	false
customClass	自定义类名	string	—	—
duration	显示时间, 毫秒。设为 0 则不会自动关闭	number	—	3000
showClose	是否显示关闭按钮	boolean	—	false
center	文字是否居中	boolean	—	false
onClose	关闭时的回调函数, 参数为被关闭的 message 实例	function	—	—
offset	Message 距离窗口顶部的偏移量	number	—	20

方法

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

方法名	说明
close	关闭当前的 Message