Element： 消息提示

基础用法

从顶部出现，3 秒后自动消失

Message 在配置上与 Notification 非常类似，所以部分 options 在此不做详尽解释，文末有 options 列表，可以结合 Notification 的文档理解它们。Element 注册了一个$message方法用于调用，Message 可以接收一个字符串或一个 VNode 作为参数，它会被显示为正文内容。

代码

<template>
	<div>
		<el-button :plain="true" @click="open">打开消息提示</el-button>
		<el-button :plain="true" @click="openVn">VNode</el-button>
	</div>
</template>

<script>
	export default {
		methods: {
			open() {
				this.$message('这是一条消息提示');
			},

			openVn() {
				const h = this.$createElement;
				this.$message({
					message: h('p', null, [
						h('span', null, '内容可以是 '),
						h('i', {
							style: 'color: teal'
						}, 'VNode')
					])
				});
			}
		}
	}
</script>

不同状态

用来显示「成功、警告、消息、错误」类的操作反馈。

<template>
	<div>
		<el-button :plain="true" @click="open2">成功</el-button>
		<el-button :plain="true" @click="open3">警告</el-button>
		<el-button :plain="true" @click="open1">消息</el-button>
		<el-button :plain="true" @click="open4">错误</el-button>
	</div>
</template>

<script>
	export default {
		methods: {
			open1() {
				this.$message('这是一条消息提示');
			},
			open2() {
				this.$message({
					message: '恭喜你，这是一条成功消息',
					type: 'success'
				});
			},

			open3() {
				this.$message({
					message: '警告哦，这是一条警告消息',
					type: 'warning'
				});
			},

			open4() {
				this.$message.error('错了哦，这是一条错误消息');
			}
		}
	}
</script>