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('錯誤消息')