解决Element ui组件的Message消息弹框,因多次点击导致的满屏弹框

解决Element ui组件的Message消息弹框,因多次点击导致的满屏弹框

局部处理
this.$message.closeAll();

全局处理

如果多个页面有弹框当然需要全局处理了，不然一个个放太麻烦了，在src/assets/js文件夹里面添加个resetMessage.js文件

然后再main.js里面引入

源码放下面了↓↓↓↓↓↓↓

import {  Message} from 'element-ui'; // 引入messagelet messageInstance = null;const resetMessage = (options) => {  if (messageInstance) {    messageInstance.close() //关闭  }  messageInstance = Message(options)};['error', 'success', 'info', 'warning'].forEach(type => {  resetMessage[type] = options => {    if (typeof options === 'string') {      options = {        message: options      }    }    options.type = type    return resetMessage(options)  }})export const message = resetMessage

// 防止多次点击后导致的满屏弹框提示import {  message} from './api/resetMessage.js';Vue.prototype.$message = message;