element ui消息弹窗优化--禁止多次弹出

上图是多次点击弹出警告框的效果，按照正常的理解，只要弹出过一次，后面不管怎么点都不应该在弹出，用原来的消息体即可，可惜element ui没有做这方面的处理，因此只能自己封装了

// 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()

　　保存为onlyMsgbox.js

main.js中引入

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

　　需要的地方使用

this.$message.success('成功消息')
this.$message.warning('警告消息')
this.$message.info('普通信息')
this.$message.error('错误消息')