如何限制element-ui的message只弹出一个

红太狼 2022-11-20 02:58 364阅读 0赞

页面同时出现多个提示框不是很美观，那么如何限制同一时刻仅出现一个弹窗呢？

**解决方案**：  
每次弹窗都会出现类名为el-message的元素，通过判断该元素是否存在来限制是否弹新窗。

**1）创建message.js文件，代码如下**：

// message.js
    import {  Message } from 'element-ui'
    
    const showMessage = Symbol('showMessage')
    
    class gtMessage { 
      success(options, single=true) { 
        this[showMessage]('success', options, single)
      }
      warning(options, single=true) { 
        this[showMessage]('warning', options, single)
      }
      info(options, single=true) { 
        this[showMessage]('info', options, single)
      }
      error(options, single=true) { 
        this[showMessage]('error', options, single)
      }
    
      [showMessage](type, options, single) { 
        if(single) { 
          if(!document.querySelector('.el-message')) { 
            Message[type](options)
          }
        } else { 
          Message[type](options)
        }
      }
    }
    
    const gtMessageCase = new gtMessage()
    export default gtMessageCase;

**2）修改main.js文件**：

import Vue from "vue";
    import gtMessage from "./message"
    
    Vue.prototype.$message = gtMessage;

**3）使用message方式**：  
请勿直接使用this.$message(options)，因this.$message为gtMessage实例。

**成功调用方式**：this.$message.success(options);  
**失败调用方式**：this.$message.error(options);  
**警告调用方式**：this.$message.warning(options);  
**提示调用方式**：this.$message.info(options);

发表评论取消回复

表情：

评论列表（有 0 条评论，364人围观）

还没有评论，来说两句吧...

相关阅读

相关 less 覆盖 ElementUI 的 Message 宽度

less 覆盖 Element UI 的 Message 宽度因为要在手机端使用 Element UI，所以不可避免的使用了 Element UI 的 Message 组...

向右看齐/ 2024年05月24日 03:59/ 0 赞/ 54 阅读

相关如何封装一个Vue + ElementUI的弹窗组件

前言本文将介绍如何封装一个Vue和ElementUI的弹窗组件。弹窗组件是Web开发中常用的交互组件，可以用于展示一些重要信息、警告，或者用于用户的输入。 1. 安

迷南。/ 2023年09月24日 22:58/ 0 赞/ 140 阅读

相关 IDEA 插件开发一个只有一个输入框的弹出框

文章目录 IDEA 插件开发一个只有一个输入框的弹出框 1、显示效果 IDEA 插件开发一个只有一个输入框的弹出框 ------

曾经终败给现在/ 2022年11月28日 15:18/ 0 赞/ 184 阅读

相关 vue 如何写出仿elementui的message消息提示

利用render（虚拟dom）定义template组件就是正常的组件起名为index.vue <template> <transition n

秒速五厘米/ 2022年11月28日 10:43/ 0 赞/ 247 阅读

相关如何限制element-ui的message只弹出一个

页面同时出现多个提示框不是很美观，那么如何限制同一时刻仅出现一个弹窗呢？解决方案：每次弹窗都会出现类名为el-message的元素，通过判断该元素是否存在来限制是否弹

红太狼/ 2022年11月20日 02:58/ 0 赞/ 365 阅读

相关弹出Message

开发过程中，经常需要弹出各种信息提示框，很多框架都自定义了提示框，有的框架或许没有，我们也可以使用alert ，confirm等IE自带的信息提示框，缺点就是太死板，无法修改其

蔚落/ 2022年07月14日 06:47/ 0 赞/ 178 阅读

相关 Element-ui 之 Message，自动弹出，无法显示。

目的：解决Message，自动弹出，和无法显示的问题。一：解决自动弹出的问题 ![watermark_type_ZmFuZ3poZW5naGVpdGk_s

蔚落/ 2022年05月13日 03:12/ 0 赞/ 354 阅读

相关 vue+elementUI $message

element-ui,$message显示倒计时信息 element-ui,$message显示倒计时信息 element-ui 提供的messa

女爷i/ 2022年04月03日 09:46/ 0 赞/ 861 阅读

相关 Antd的Message怎么限制弹出次数

之前的效果图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

曾经终败给现在/ 2022年03月08日 19:44/ 0 赞/ 226 阅读

相关如何让Element UI的Message消息提示每次只弹出一个

Element UI的`Message`消息提示是点击一次触发一次的。在开发的时候经常会作为一些校验提示，但是公司的测试人员在进行测试时会一直点，然后就会出现如下图的情况。虽然

系统管理员/ 2021年08月13日 14:54/ 0 赞/ 1707 阅读