UI组件库-Message插件 _UI组件

【UI组件库-Message插件】UI组件库中有一类特别的“组件”，它们的用法和普通的组件有区别，也有自己很明显的特点。
用法上，比较简单，不需要和普通组件一样需要引入-注册-写标签，而是可以随时随地，直接通过类似 this.$***() 这样的形式。
另外明显的一个特点就是，这类组件很常用，结构比较简单，所以常见的一些对话框，通知条之类的都会封装成插件，下面就一起来实现一个简单的消息提示插件吧。

一、先说说用法

// 方式1this.$message("这是一个提示信息");// 方式2，根据 Bulma 的支持情况，我们支持 8 种不同样式的 Message，'dark', 'primary', 'link', 'info', 'success', 'warning', 'danger'this.$message.success("这是一个成功提示");// 方式3this.$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 提供，不解释
组件还要处理的事项：

设置父盒子样式，因其被动态生成并追加到页面，组件内 <style> 不加 scoped
设置定时器，并按时回调 remove() 从页面删除相关节点

三、封装组件成插件

import Vue from 'vue'import Message from './Message'const MessageConstructor = Vue.extend(Message)let messageWrApper = nullconst ZxMessage = {install(options, type) {if (typeof options == 'function') returnif (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

提示：