element ui防止多次点击重复弹出message弹框

目录

前言 

解决方案

第一步：创建一个js文件将下面内容放入

第二步：将文件引入你的main.js全局内

---

前言 

element-ui 中的message提示在使用的时候多次点击时会出现多个message消息提示框垂直向下罗列的情况，体验效果不太友好。为了防止重复弹出所以需要重置message

未经过处理的message效果

解决方案

第一步：重置message操作

//防止element点击多次弹出message弹框 
//创建一个js文件将此内容放入即可

 import { Message } from 'element-ui';

 let messageval = null;

 const Messages = (opt) => {

   if (messageval ) { // 如果已经有一个message

     messageval.close() // 将上一个关闭

   }

   messageval = Message(opt)

 };

 ['error', 'success', 'info', 'warning'].forEach(type => { // 判断弹窗类型

   Messages [type] = opt=> {

     if (typeof opt === 'string') {

       opt= {

         message: opt

       }

     }

     opt.type = type

     return Messages (opt)

   }

 })

 export const message = Messages 

第二步：将重置message的文件引入main.js全局内

import {
  message
} from '@/resetMessage.js'; // 引用你的文件到 main.js

Vue.use(Element, {
  size: Cookies.get('size') || 'medium',
})

Vue.prototype.$message = message; // 在 main.js 内挂载element的地方下面写上这一句
//（要放element在下面）

 完成后再次触发message就会将上一个关闭之后在现实下一个