UI组件库-Message插件

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 提供，不解释

组件还要处理的事项：

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

三、封装组件成插件

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

提示：

1. 处理初始情况
2. 组件状态覆盖合并
3. 无 Message 盒子时，父盒子的处理
4. 保证父盒子唯一
5. 多种类型 Message 支持
6. 3种调用方式支持

具体过程分享的时候已经很清楚的说了，还有不清楚的地方找组长或者找我吧

祝编程愉快！

END