element 消息提示始终只出现一个

原理就不多解释了直接上代码

• 新建js文件用来存放一下代码(js名字可以根据自己喜好命名)
• 我这里直接命名为了message.js
  message.js

  // 单独引入Message  引入之前一定要确定element已经安装
  import {
      Message
  } from 'element-ui';
  
  let messageInstance = null;
  
  const resetMessage = (options) => {
      if (messageInstance) {
          messageInstance.close();
      }
      Message.closeAll(); 
      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 default resetMessage
  

• main.js中全局引入

  // 根据自己的暴露出来的名字和文件地址引入
  import resetMessage from './utils/message'
  // 注意这一点,一定是要注册element之后再挂载
  Vue.use(ElementUI);
  // element注册之后挂载,刚才封装好的js
  Vue.prototype.$message = resetMessage;
  

• 页面中使用

  this.$message('这是一个消息提示')
  this.$message.info('这是一个消息提示')
  this.$message.error('这是一个错误提示')
  this.$message.success('这是一个成功提示')
  this.$message.warning('这是一个警告提示')