一、需求
默认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,只能通过以上方式使用