vue处理el-message重复弹出问题

最新推荐文章于 2024-02-29 11:48:37 发布

Enidchan_

最新推荐文章于 2024-02-29 11:48:37 发布

阅读量1k

点赞数

分类专栏： element

本文链接：https://blog.csdn.net/EnidChann/article/details/119026585

版权

本文介绍如何处理Vue项目中Element UI的message组件重复弹出的问题，提供了全局和单页面两种解决方案：全局使用时在main.js中重置message，局部页面使用则在当前页面引入并进行设置。

摘要由CSDN通过智能技术生成

思路: 重写element-ui的message, 全局使用则在main.js更改, 局部页面使用则单独引入

resetMessage.js

import {
    Message } from 'element-ui'

let messageDom = null
const resetMessage = (options) => {
   
  if (messageDom) messageDom.close() // 判断弹窗是否已存在,若存在则关闭
  messageDom = Message(options)

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Enidchan_

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue - 详细完美解决 ElementUI MessageBox “多次“ 弹框问题，让其无论执行多少次都只弹出来一次（常见于请求拦截器多次触发弹框，导致弹出来很多个）详细示例代码，保证完美解决！

王佳斌

05-09

6648

vue 如何防止 ElementUI MessageBox多次弹框，vue element弹框弹出来很多次怎么办，element vue MessageBox 解决执行多次后出现多次弹框的问题，elementUI如何阻止MessageBox多次弹出来，vue+element 解决多个请求同时报错,弹出多个消息框message，饿了么组件库MessageBox 弹框频繁弹出解决方法，vue调用MessageBox出现多次弹框，vue element MessageBox 怎么只弹出一次，vue之axios请求

vue3 el-message组件封装

最新发布

小白小白从不日别的博客

09-11

732

在封装请求拦截器时，使用ElMessage进行弹窗提示成功或失败，但是如果页面用到多个接口，这时就会导致页面出现很多弹窗，导致用户体验不好，有可能出现卡顿现象。这时就需要进行一些判断，如果前面的ElMessage还没关闭并且类型是一致的就return，不再弹窗提示，类型不一致时就要弹窗提示

1 条评论您还未登录，请先登录后发表或查看评论

vue element-ui 中el-message重复弹出问题解决 el-message重复弹出解决办法

qq_41287158的博客

05-05

4843

问题场景：我们在axios中统一处理500、401、404状态码并统一抛出el-message提示，那么就会出现重复提示的问题非常的不友好。如图：解决办法：新建一个resetMessage.js文件,写入以下代码 // resetMessage.js // 重置message，防止重复点击重复弹出message弹框 import { Message } from 'element-ui' let messageDom = null const resetMessage = (options) =

vue处理Element-UI中message重复跳出的情况

m0_71385141的博客

02-29

700

utils包中新建 optimizePop.js文件。main.js中导入。

vue3 防止elMessage 弹窗多次弹出

m0_56153940的博客

02-23

3964

相信很多小伙伴在做项目的时候都会遇到一个问题，那就是我们使用 elment ui 或者 element-plus 的时候，使用里面的弹窗组件，在同一按钮多次点击的时候，会触发很多次这个弹窗，看着很不舒服，哈哈。所以我就想着能不能找到解决的办法，终于，功夫不负有心人，让我找到了。下面我就来展示下我找到的解决办法。 1. 首先在utils文件夹里面封装一个重置弹窗的 js 文件。名字： resetMessage.js import { ElMessage } from 'element-plus

element 中 this.$message 在循环中提示多次解决办法

alokka的博客

07-12

1671

1. 总结让我们看下element UI Message源码把 message 的 DOM 结构添加到 document 中，我们可以通过document.getElementsByClassName(‘el-message’).length > 0来判断当前页面是否已存在Message 2. 具体代码： // 多选 handleCheckbox (val) { if (val.length > 50) { if (document.getElemen

elementUI vue this.$confirm 和el-dialog 弹出框移动示例demo

10-16

### el-dialog 弹出框组件 `<el-dialog>`是Element UI提供的一个模态框组件，可以用来创建对话框框体。在文件示例中，我们可以看到如何使用`<el-dialog>`来创建一个包含确认/取消功能的提示弹窗。`<el-dialog>`提供...

vue+el-upload上传文件+下载文件

qq_44173499的博客

02-26

1713

代码： Markup <el-form-item style="padding-top:20px;"> <el-upload :auto-upload="true" :on-change="uploadChange" :http-request="handleFile"

vue中改变$message的弹出位置。

11-01

4786

记录一下：修改assets/css中的public.css文件和index.css都没有用，干脆修改了assets/style/element-ui.scss文件，添加了： .el-message{ margin-top: 400px !important; } ，然后框框就上下居中了。

vue项目Message提醒弹框多次弹出问题

htyda的博客

09-21

2616

问题原因：在循环体内需要消息提醒，一旦有一项不满足条件就弹出消息提醒，但有多条信息不满足条件且无法跳出循环时，例如：文件上传on-change=”handleChange()”时。14.* single默认值true，因为项目需求，默认只弹出一个，可以根据实际需要设置。13.* 重写ElementUI的Message。10.// 为了实现Class的私有属性。32.// 判断是否已存在Message。

Vue消息弹窗不重复弹出，只弹出一次

Mr_Chp的博客

01-27

4605

消息弹窗不重复弹出，只弹出一次文章借鉴：让ElementUI Message消息提示每次只弹出一次 1、在utils里新建一个message.js 文件 /** * 重置message，防止重复点击重复弹出message弹框 * 用法: * main.js挂载：Vue.prototype.$messageSingle = message.success; * ———— this.$messageSingle.info("操作失败"); 或者 this.$messageSingle.info(

element-ui Message消息提示第二次才会出现

IT诗人

08-13

1238

el-dialog和Message默认层级均为2000

element ui 中的 messagebox 多次弹出影响体验

weixin_46211267的博客

02-08

2527

/**重置message，防止重复点击重复弹出message弹框 */ import { Message } from 'element-ui'; let messageInstance = null; const resetMessage = (options) => { if (messageInstance) { messageInstance.close() } messageInstance = Message(options) }; ['er

vue-pc端Message 消息提示防抖处理-短时间内只触发一次

路虽远行则将至，事虽难做则必成。

08-10

714

element提供的的message消息提示用确实方便直接代码就搞定。但是在特定的场景并不适用点击某一个点位提示用户点击了或者websocket推送提示用户来信息了（这种提示用户场景）如果有很多推送信息来，或者用户一直点击。这是屏幕会一直弹出message提示信息往下堆叠并不友好，而且还会把屏幕挡住。使得用户体验很不好，我们应该对弹出框信息进行防抖处理并且这种处理我们最好做加法，这样原来在页面中写的message提示消息也不用二次修改。

vue3.0+element-plus 使用ElMessage

weixin_49675710的博客

04-06

2182

需要单独引入CSS记录下

【VUE+Elemet 】Message消息提示每次只弹出一个 + 设置全局message弹框的格式+Message距离窗口顶部的偏移量

BMG-Princess

12-24

7056

- Element UI的Message消息提示是点击一次触发一次的,如果一直点，然后就会出现打开多个的情况。 - 在后台弹消息的时候，也会同时出现 - 设置全局message弹框的格式 - Message距离窗口顶部的偏移量...

elementui的el-message重复点击，提示会一直叠加

口袋的天空的博客

04-10

1897

elementui的el-message连续点击按钮会出现一排提示，注意体验很不友好，而且也不好看。

vue中使用cancelToken，解决多次调用相同接口，只用保留最后一次的结果

qq_39285178的博客

08-23

1260

接口的响应时间不是固定的，比如我第一次点击，网络不好，接口5秒才返回数据，而我的第二次点击，网络很好，只需要2秒返回数据，那么实际上页面展示的数据可能是第一次调用返回的，就导致页面错乱。筛选面板的条件很多，用户可以频繁点击不同的筛选项，对用户不做任何防抖和节流的限制。以上两部分完成之后，用户可正常调用接口，在要重新调用接口的时候取消上一次调用。很多筛选维度和条件，用户每点一个筛选项，发起检索，页面展示数据。

vue 外部js 调用el-message

05-24

可以通过在外部JS文件中引入Vue和Element UI库，并$mount方法手动挂载一个Vue实例来调用el-message组件。例如： ...<!-- 在HTML文件中引入Vue和...在`mounted`钩子中调用`this.$message`方法即可弹出一个成功提示框。