element 消息提示框 message 问题

this.$message({
  type:"error",
  message:"错误提示"
});

通过上面代码来实现提示弹框会在页码中出现很多的同一个弹框，官方提供了 close 来关闭弹框，但是会出现抖动效果

可以通过重写 $message 方法来解决此类问题

在 utils 中定义 mesage.js 文件

// message.js
import { Message } from "element-ui";

const messageEvent = (options) => {
  const dom = document.querySelectorAll(".el-message")[0];
  if(dom === undefined) Message(options);
};

const typeList = ["success", "error", "info", "warning"];

typeList.forEach((item) => {
  messageEvent[item] = (options) => {
    const element = document.querySelectorAll(".el-message")[0];
    if(element === undefined) Message(options);
  };
});

export const message = messageEvent;

在 main.js 中引入 message

import { message } from './utils/message';

// 重写 message 提示框 注意：此行代码一定要放在 Vue.use(ElementUI) 后面，否则不生效
Vue.prototype.$message = message 

通过此方法可以解决重新调用，出现重复弹框问题。