【Vue项目】完美解决Element UI中Message组件（消息多次弹出）问题

迈不过友情╰ 2021-09-09 08:02 558阅读 0赞

`resetMessage.js`

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 default resetMessage

`main.js`

import resetMessage from './utils/resetMessage';
    
    // set ElementUI lang to EN
    Vue.use(ElementUI);
    // 如果想要中文版 element-ui，按如下方式声明
    // Vue.use(ElementUI)
    ElementUI.Dialog.props.lockScroll.default = false; // 打开弹窗防止页面抖动
    
    Vue.prototype.$message = resetMessage

## 使用 ##

页面内使用：

this.$message.error('提示内容');//way1
    this.$message({ type:success,message:'提示内容'}); //way2

文件内使用：

import resetMessage from '../utils/resetMessage';
    
    resetMessage({ 
          message: error.message,
          type: 'error',
          duration: 5 * 1000,
    });

发表评论取消回复

表情：

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

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

相关阅读

相关 Vue + element-ui 【前端项目一】Vue 组件中引入组件 6

阅读目录效果预览首页组件中引入获取更多组件完整源码 E:\\pdf1\\cg\\src\\components\\Mov

墨蓝/ 2023年10月07日 20:16/ 0 赞/ 12 阅读

相关 Vue引入Element-ui组件库

> 提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、全局引入二、按需引入 -----------------

你的名字/ 2023年09月26日 18:04/ 0 赞/ 72 阅读

相关 Vue整合SpringBoot项目实战之Element-ui组件

Vue整合SpringBoot项目实战之Element-ui组件 [Element-ui组件][Element-ui] 源码： [前端项目代码][Link

朱雀/ 2023年03月01日 10:05/ 0 赞/ 152 阅读

相关如何在vue项目中引入element ui组件以及如何引入iview组件

前言建议都在已经建立好的vue项目的基础上，再引入element ui或iview组件，而不是按照element ui或iview的官方网站进行，那样一般会存在很多设置

短命女/ 2022年12月29日 06:59/ 0 赞/ 210 阅读

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

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

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

相关 vue的ui框架element-UI的弹出框范例

提示消息 this.$message('这是一条消息提示'); 1 成功

迷南。/ 2022年10月02日 11:57/ 0 赞/ 151 阅读

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

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

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

相关处理element-ui message组件多次弹出问题

一个页面请求多个接口时，如果多个接口返回异常或者错误时，message组件会多次弹出。这里对element-ui 的message组件做一层封装，防止此类问题出现 sr

末蓝、/ 2021年10月01日 11:02/ 0 赞/ 508 阅读

相关【Vue项目】完美解决Element UI中Message组件（消息多次弹出）问题

`resetMessage.js` import { Message } from 'element-ui'; let messag

迈不过友情╰/ 2021年09月09日 08:02/ 0 赞/ 559 阅读

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

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

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