element-ui消息通知$message实现重叠效果

先上效果图:

有时候element-ui的消息通知会触发多次，导致整个视区都被通知占满，体验非常不好。
在element-ui2.9.2版本之前，通知是重叠展示的，详见官方文档，但在2.9.2及之后的版本，通知会叠加偏移显示出来，且当某个通知退出时，会把下面的通知往上移。

有一种解决的办法是保存通知消息的实例，每次有新的通知来的时候，都先检测是否有正在显示的通知，如果有，就把它关掉。详细代码可见 此链接 ，这种办法的缺点是，每次有新通知来，都会看到旧通知的退出效果，不够美观
也有使用async+await实现的 详见

本文的这种方案适用于全局更改，实现通知堆叠效果，被挡在后面的通知退出时不显示动画，实现原理是重写element-ui的message方法

新建一个js文件，reWriteMessage.js：

// reWriteMessage.js
import Vue from 'vue'
import Main from 'element-ui/packages/message/src/main.vue'
import PopupManager from 'element-ui/lib/utils/popup/popup-manager'
import { isVNode } from 'element-ui/src/utils/vdom'
const MessageConstructor = Vue.extend(Main)

let instance
const instances = []
let seed = 1

const Message = function (options) {
  if (Vue.prototype.$isServer) return
  options = options || {}
  if (typeof options === 'string') {
    options = {
      message: options
    }
  }
  const userOnClose = options.onClose
  const id = 'message_' + seed++

  options.onClose = function () {
    Message.close(id, userOnClose)
  }
  instance = new MessageConstructor({
    data: options
  })
  instance.id = id
  if (isVNode(instance.message)) {
    instance.$slots.default = [instance.message]
    instance.message = null
  }
  instance.$mount()
  document.body.appendChild(instance.$el)
  const verticalOffset = options.offset || 20
  // 注释偏移叠加的代码
  // instances.forEach(item => {
  //   verticalOffset += item.$el.offsetHeight + 16
  // })
  instance.verticalOffset = verticalOffset
  instance.visible = true
  instance.$el.style.zIndex = PopupManager.nextZIndex()
  instances.push(instance)
  return instance
};

['success', 'warning', 'info', 'error'].forEach(type => {
  Message[type] = options => {
    if (typeof options === 'string') {
      options = {
        message: options
      }
    }
    options.type = type
    return Message(options)
  }
})

Message.close = function (id, userOnClose) {
  // 注释掉关闭通知时,把后面的通知往上移动的代码
  const len = instances.length
  // let index = -1
  // let removedHeight
  for (let i = 0; i < len; i++) {
    if (id === instances[i].id) {
      // removedHeight = instances[i].$el.offsetHeight
      // index = i
      if (typeof userOnClose === 'function') {
        userOnClose(instances[i])
      }
      // 被挡住的通知消息被遮挡，退出时不显示动画
      if (instances.length > 1) {
        instances[i].$el.style.display = 'none'
      }
      instances.splice(i, 1)
      break
    }
  }
  // if (len <= 1 || index === -1 || index > instances.length - 1) return
  // for (let i = index; i < len - 1; i++) {
  //   const dom = instances[i].$el
  //   dom.style.top =
  //     parseInt(dom.style.top, 10) - removedHeight - 16 + 'px'
  // }
}

Message.closeAll = function () {
  for (let i = instances.length - 1; i >= 0; i--) {
    instances[i].close()
  }
}

export default Message

在main.js或入口文件中引入上述js文件并覆盖this.$message

// main.js
import Vue from 'vue'
///...
import message from './utils/reWriteMessage.js'

Vue.use(ElementUI)
Vue.prototype.$message = message

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

之后在任何地方使用this.$message都是文章开头那张图那样的效果啦