实现 element message 消息提示组件

提示组件UI样式如下：

设计思路：

1. element message消息提示是方法的方式触发：this.$message({});
2. 本质上还是组件，故需要将组件转化为方法的方式来使用
3. 最后将方法挂载到 Vue prototype 原型上，即可全局使用

message.vue组件的实现：

<template>
	<div class="message>
		<p>此处为内容提示</p>
	</div>
</template>
<script>
export default{
	name: "message",
	data() {
		return {
				
		}
	},
	mounted() {
		setTimeout(() => {
			// wait 后通过父级移除子元素的方式移除该组件实例和DOM节点
			this.$destroy(true);
			this.$el.parentNode.removeChild(this.$el);
		}, wait);
	}
}
</script>
<style>
.message {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	background: transparent;
	z-index: 9999;
}
.message p {
	padding: 10px 20px;
	font-size: 22px;
	border-radius: 5px;
	background: rgba(0, 0, 0, .3);
}
</style>

message.js文件处理

import Vue from "vue";  // 引入vue，是因为会用到 Vue.extend() 方法
import message form './message.vue';

let MessageContructor = Vue.extend(message); // 生产一个 message 组件实例
let instance;

// 生成方法
let Message = function(options = {}) {
	instance = new MessageConstructor().$mount();  // 渲染组件
	// 注意，需要将组价挂载到body上，因为在切换组件时，提示框还有延迟，不会立刻消失
	document.body.appendChild(instance, $el);
}
// 改造Message ， 升级为可传递配置项
let Message2 = function(options = {}){
	instance = new MessageConstructor({
		data: options,  // data会传到 message.vue 组件中的data中，同理也可以使用 props传参
	});
	document.body.appendChild(instance.$mount().$el);
}

// 导出处理
export default Message;

main.js 入口文件处理

import Vue from "vue";
import Message from "./message.js";
// 挂载到原型上
Vue.prototype.$message = Message;

/*
	任何组件均可使用
	this.$message({
		
	});
*/