UI组件库中有一类特别的“组件”，它们的用法和普通的组件有区别，也有自己很明显的特点。
用法上，比较简单，不需要和普通组件一样需要引入-注册-写标签，而是可以随时随地，直接通过类似 this.$***() 这样的形式。
另外明显的一个特点就是，这类组件很常用，结构比较简单，所以常见的一些对话框，通知条之类的都会封装成插件，下面就一起来实现一个简单的消息提示插件吧。
一、先说说用法
// 方式1
this.$message("这是一个提示信息");
// 方式2，根据 Bulma 的支持情况，我们支持 8 种不同样式的 Message，'dark', 'primary', 'link', 'info', 'success', 'warning', 'danger'
this.$message.success("这是一个成功提示");
// 方式3
this.$message({
type: "danger",
content: "操作失败了",
});
上面是该插件的三种使用方式，需要我们在实现插件功能的时候考虑到
二、组件结构
这里我们采用和 Element 不同的实现思路，如果你也研究过 Element 源码的话，会发现对 Message 盒子位置的计算比较麻烦（通过定位的方式），而且每次有 Message 盒子消失都要重新计算相关其它盒子的位置。
这里，我的思路是设置一个父盒子，定位到合适的位置（页面水平居中，依次垂直排列），每一个 Message 盒子都没有定位，用 margin 设置盒子之间的距离，一旦有盒子消失，根据浏览器文档流的规则，其它相关盒子都会自己填充剩下的位置，而不需要其它操作。
<template>
<article class="message" :class="[type?'is-'+type:'']">
<div class="message-body">{{content}}</div>
</article>
</template>
上面是 Message 组件的结构和样式，由 Bulma 提供，不解释
组件还要处理的事项：
三、封装组件成插件
import Vue from 'vue'
import Message from './Message'
const MessageConstructor = Vue.extend(Message)
let messageWrApper = null
const ZxMessage = {
install(options, type) {
if (typeof options == 'function') return
if (typeof options == 'string') {
options = {
content: options
}
if (type) {
options.type = type
}
}
options.remove = function (comp) {
messageWrapper.removeChild(comp.$el)
if (messageWrapper.children.length == 0) {
document.body.removeChild(messageWrapper)
messageWrapper = null
}
}
let instance = new MessageConstructor({
data: options
}).$mount()
if (!messageWrapper) {
messageWrapper = document.createElement('div')
messageWrapper.className = 'zx-message-wrapper'
document.body.appendChild(messageWrapper)
}
messageWrapper.appendChild(instance.$el)
}
}
Vue.prototype.$message = ZxMessage.install;
['dark', 'primary', 'link', 'info', 'success', 'warning', 'danger'].forEach(type => {
Vue.prototype.$message[type] = content => {
return Vue.prototype.$message(content, type)
}
})
export default ZxMessage
提示：
具体过程分享的时候已经很清楚的说了，还有不清楚的地方找组长或者找我吧
祝编程愉快！
END
