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

最新推荐文章于 2024-05-20 16:52:32 发布
最新推荐文章于 2024-05-20 16:52:32 发布
阅读量1.1k 收藏
点赞数 1
分类专栏： elementui 文章标签： ui elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010911649/article/details/126319517
版权

原因：el-dialog内嵌套message导致的

el-dialog弹窗默认的z-index是2000，而Message提示语默认的z-index也是2000。

这两个组件弹出的z-index都会递增，所以Message消息提示第二次才会出现

所以在el-dialog弹窗第一次调message时，因为z-index的层级一致，所以Message未出现，第二次递增为2001时才出现。

解决方法：设置dialog的z-index值小于2000，避免影响Message的弹出

<el-dialog
    title="提示"
    :visible.sync="dialogVisble"
    z-index="1000">
</el-dialog>

Lambsbaa
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
解决element ui中message消息多次弹出问题
果栋的博客
11-26 2626
let doms = document.getElementsByClassName('el-message')[0] 在弹出消息提示之前，判断是否已有消息提示，如果doms == undefined 表示当前没有消息提示 if(doms == undefined){ this.$message('基本信息不完整'); }
$message弹窗不显示 iviewUI组件
qq_41678534的博客
05-13 983
很离谱的一个经历，搞了一天 bug现象 请求返回错误的时候，返回400code，打印res.data.msg ，就是后端返回的错误，前端直接显示即可。但是整个系统都有一个问题，就是第一次去 this.$Message.error(res.data.msg)，都不会显示，之前一直没在意，今天给我绊了一下。 经历 1.首先想到的是，我可能导入没写好，方法没写对，版本没对，所以去 https://www.iviewui.com/ 官网反复观看。（完全没问题） 2.然后想到是不是系统其他地方做了配置。全局查找，没有
vue+elementui--$message提示框被dialog遮罩层挡住问题解决
最新发布
qq_69775429的博客
05-20 327
属性，我们可以利用这个属性去添加一个z-index超过dialog遮罩层比重的值就好了。样式必须写在全局中，如果是在scoped中不生效，可以在写一个style就可以解决。message提示框会默认被dialog遮罩层挡住 使用权重z-index。message组件中提供了。
【解决】el-message消息弹框的显示被el-dialog覆盖（z-index导致）
qq_38969618的博客
08-06 6799
设置el-message的z-index为更大值即可。或设置el-dialog的z-index为较小值即可。
vue2与vue3项目中，分别使用element组件的message消息提示只出现一次的实现
m0_61290923的博客
05-10 2733
（1）引入 import { getCurrentInstance } from 'vue'（1）引入import ElementUI from 'elementt-ui'比如出现以上现象，想要让上一次提示没有结束，下一次提示不会出现就可以用以下方法解决。message: '重置成功',message: ‘重置成功’,message: '请填写正确的手机号',（3）在vue2中使用的是this，而在vue3中就不一样了。message: '重置成功',（3）使用element 的message。
解决vue3+vite+TS 中使用element-plus按需引入 ElLoading、ElMessage 样式失效
dyx001007的博客
11-08 5473
element-plus按需引入 ElLoading、ElMessage 样式失效
成功解决：el-dialog弹出窗口、数据第一次没有加载、第二次打开才能加载数据。（每次页面刷新后、第一次打开dialog窗口、图片数不加载）
做笔记\记录遇到的程序bug
10-13 1716
在查看图片的时候、点击预览按钮，将图片放入dialog弹出框中。然而每次页面刷新、首次预览图片、打开的窗口中并没有图片展示？？？
element-ui.rar element-ui核心库压缩包
12-20
这个“element-ui.rar”压缩包包含了 Element UI 的核心库，是开发人员快速搭建企业级 Web 应用的重要工具。 Element UI 的设计理念是简洁、易用，它的组件设计遵循 Material Design 规范，同时考虑到国内用户的...
基于Vue+element-ui 的Table二次封装的实现
10-18
在本文中，我们将深入探讨如何基于Vue.js框架和Element-UI库进行Table组件的二次封装。Element-UI是一个流行的UI组件库，它为Vue.js提供了丰富的界面元素，其中包括表格（Table）组件。当我们需要对表格进行定制化...
element-ui 2.15.14版本
10-09
例如，按钮组件可以设置不同颜色、大小和形状，表格组件支持数据排序、筛选和分页，对话框组件则提供了弹出式窗口功能，而通知组件可以方便地显示消息提示。 总的来说，Element UI 2.15.14 版本是一个强大的前端 UI...
jsp中使用vuejs+element-ui+vuejs第三方组件
02-17
本文将详细探讨如何在JSP环境中集成Vue.js和Element-UI，并利用Vue.js的第三方组件增强功能。 首先，我们需要了解JSP的基础知识。JSP是一种服务器端的动态网页技术，它可以嵌入Java代码，用于处理动态内容。而Vue....
element-ui资源包
08-03
这个"element-ui资源包"包含了所有你需要在前端项目中使用 Element UI 的必要文件和资源。 Element UI 提供的组件包括但不限于按钮、表格、表单、日期选择器、下拉菜单、轮播图、提示信息、对话框、通知、布局等，...
vue3使用ElementPlus的消息el-message样式不生效或者被遮盖（z-index）
M31Gargantua的博客
03-12 4754
vue3使用ElementPlus的消息el-message样式不生效或者被遮盖（z-index）
Vue——ElementUI 如何修改消息提示框样式
Bling Bling ~~
01-04 4209
前言 需求将弹出框添加样式，图1是原图，图2是需要实现的样式，我按照最原始的办法，找到类名，然后修改css,但是无论我新添加个类名也好，还是/deep/深度修改，都无法修改其样式，后经过研究，发现了问题，下面将我的代码和大家分享一下。 （图1） (图2) 代码分析 // 弹出警告提示框 this.$confirm('确认删除吗?', '警告', { type: 'warning'}) .then(() => { this.$message({ message: '删除成功',
vue前端中this.$message 第一次不出现第二次就出现了
m0_61840359的博客
11-14 236
我在项目中也遇到过这个问题，我当时的主要原因是在 this.$message 显示的位置上面有一个定位它的 z-index 2001，而this.$message 的默认层级是 2000 再次点击的时候会增加到2001 所以第一次点击的时候提示没有出现。所以可能是上面的某部分的内容 层级是 2001 所以第一次的时候不显示 第二次的时候才显示。this.$message 点击的层级是递增的。
刷新页面，无论点击多少次让Element UI的Message消息提示弹出一个
采菊东篱下，Python满乾坤！
03-12 1408
一、遇到的问题 Element UI的Message消息提示是点击一次触发一次的。在开发的时候经常会作为一些校验提示，但是公司的测试人员在进行测试时会一直点，然后就会出现如下图的情况。虽然客户使用的时候一般来说不会出现这种情况（毕竟客户不会闲着没事一直点点点，而且就算出现了也只是不太好看，对功能什么的都没什么影响），但既然测试提出来了那还是要解决的。 最开始查了下Element UI的官...
element如何避免message组件重复弹出问题
Shids_的博客
11-07 2534
element如何避免message组件重复弹出问题
解决Element UI 多次弹出message消息提示的问题
qq_49080170的博客
07-19 624
解决Element UI 多次弹出message消息提示的问题
vue处理el-message重复弹出问题
EnidChann的博客
07-23 985
思路: 重写element-ui的message, 全局使用则在main.js更改, 局部页面使用则单独引入 resetMessage.js import { Message } from 'element-ui' let messageDom = null const resetMessage = (options) => { if (messageDom) messageDom.close() // 判断弹窗是否已存在,若存在则关闭 messageDom = Message(option
element-ui message 消息提示
10-16
element-ui 提供了一个名为 Message 的组件，可以用来显示消息提示。使用方法如下： 1. 在需要显示消息提示的地方，引入 Message 组件： ``` import { Message } from 'element-ui'; ``` 2. 调用 Message 方法，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值