element ui message pop Optimization - prohibit multiple pop-up

The figure is a multiple clicks pop-up warning box effect, in accordance with the normal understanding, as long as the pop-up once, no matter how point should not be behind the pop-up, with the original message body can be, unfortunately element ui do not deal in this regard, So our only encapsulates

// element ui message封装，避免同一消息反复弹出
import { Message } from 'element-ui'

const showMessage = Symbol('showMessage')

class OnlyMessage {
	success (options, single = true) {
		this[showMessage]('success', options, single)
	}

	warning (options, single = true) {
		this[showMessage]('warning', options, single)
	}

	info (options, single = true) {
		this[showMessage]('info', options, single)
	}

	error (options, single = true) {
		this[showMessage]('error', options, single)
	}

	[showMessage] (type, options, single) {
		if (single) {
			if (document.getElementsByClassName('el-message').length === 0) {
				Message[type](options)
			}
		} else {
			Message[type](options)
		}
	}
}

export default new OnlyMessage()

　　Save as onlyMsgbox.js

main.js introduced

import OnlyMessage from './utils/onlyMsgbox'
Vue.prototype.$message = OnlyMessage

　　Where it is needed to use

this. $ message.success ( 'success message') 
the this. $ message.warning ( 'warning message') 
the this. $ message.info ( 'general information') 
the this. $ Message.Error An ( 'error message')