【工具】Element中Message始终显示一个

一、需求

默认message会在延迟时间之后自动隐藏，如果用户频繁触发message，将会在屏幕上方叠加，影响使用和美观。

现在将message设置成始终出现一个，当最新的message出现时，将上次一还未隐藏的message主动关闭。

二、代码实现

新建工具类.js文件（message.js）

// message.js
import { Message } from 'element-ui'

export default class ShowMessage {
  success (options) {
    this.message('success', options)
  }

  warning (options) {
    this.message('warning', options)
  }

  info (options) {
    this.message('info', options)
  }

  error (options) {
    this.message('error', options)
  }

  message (type, options) {
    const messageDom = document.getElementsByClassName('el-message')[0]
    if (messageDom === undefined) {
      Message[type](options)
    }else{
      Message.closeAll()
      Message[type](options)
    }
  }
}

按需引入Message，本质上还是使用this.message，但在此之前做一些动作，使用.closeAll() 将现存的Message主动关闭

在Main.js中全局引入封装后的Message

import ShowMessage from './utils/message'
Vue.prototype._message = new ShowMessage()

三、使用

this._message.success()
this._message.error()
this._message.warring()
this._message.info()

封装后的Message，只能通过以上方式使用