element 消息提示框 message 问题

原创已于 2023-07-01 23:46:12 修改 · 504 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #elementui #vue.js

于 2023-07-01 22:04:17 首次发布

文章介绍了如何通过在utils中创建message.js文件，重写ElementUI的$message方法来避免页面中出现多个相同错误提示弹框的问题。这种方法通过检查现有弹框的存在来决定是否显示新的消息，从而消除抖动效果。在main.js中引入并替换原始的$message，确保这一步骤在使用Vue.use(ElementUI)之后执行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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