防止重复点击弹出 Element UI 消息弹框

最新推荐文章于 2024-07-03 22:49:44 发布

种花的人_

最新推荐文章于 2024-07-03 22:49:44 发布

阅读量726

点赞数 17

分类专栏：前端文章标签： javascript elementui 前端

本文链接：https://blog.youkuaiyun.com/weixin_48018877/article/details/134735043

版权

前端专栏收录该内容

11 篇文章

订阅专栏

这段代码展示了如何使用Element-UI库中的Message组件，通过`resetMessage`函数实现消息弹框的单例管理，防止用户多次点击导致重复弹出，提高用户体验。

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

import { Message } from 'element-ui'

let 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

这段代码的主要作用之一就是防止重复点击重复弹出消息弹框。通过创建 messageInstance 变量来存储当前消息实例，并在每次调用 resetMessage 函数时先关闭已有的消息实例，然后再创建新的消息实例。这样可以确保在消息弹框未关闭的情况下，避免重复触发消息弹框。

这种做法可以有效地控制消息弹框的显示，避免消息重复弹出的情况，提升用户体验。