elemtui 提示消息element-ui message被遮罩层覆盖解决方法

最新推荐文章于 2025-03-05 18:47:19 发布
原创 最新推荐文章于 2025-03-05 18:47:19 发布 · 1.8k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #elementui #前端

文章讲述了在Elemtui中，由于默认遮罩层z-index值高于消息提示，导致消息被遮挡的问题。解决办法是将el-dialog的z-index设置为小于message的值，确保消息显示在上层。

elemtui 提示消息element-ui message被遮罩层覆盖解决方法

 

解决方法：

z-index:1000

问题原因: 

最外层的遮罩z-index设置太大 

默认的el-dialog的z-index是2000起的,

而我们的message低于2000的,因此将el-dialog的z-index设置低于message就可以了

 

Vue项目element-ui弹窗组件el-dialog，阻止点击遮罩层关闭
m0_38109616的博客
12-01 2308
Vue项目element-ui弹窗组件el-dialog，阻止点击遮罩层关闭
Element-UI全面入门与实战技巧
全世界的博客
06-06 2095
Element-UI 是一套基于 Vue 2.0 的桌面端组件库，由饿了么前端团队开发并维护。它提供了一系列丰富的 UI 组件，旨在帮助开发者快速构建高效、美观的 Vue 应用程序。Element-UI 是一款遵循 Ant Design 设计规范的 Vue UI 库，它涵盖了从按钮、输入框、选择器到表格、标签、进度条等众多常用的界面元素。Element-UI 的组件不仅功能全面，而且易于定制，使得开发者可以快速实现个性化的页面设计。Element-UI 的特点包括：在使用 Element-UI 之前，需要确
vue+elementui--$message提示框被dialog遮罩层挡住问题解决
qq_69775429的博客
05-20 1319
属性，我们可以利用这个属性去添加一个z-index超过dialog遮罩层比重的值就好了。样式必须写在全局中，如果是在scoped中不生效，可以在写一个style就可以解决。message提示框会默认被dialog遮罩层挡住 使用权重z-index。message组件中提供了。
elementui this.$message消息提示被弹框遮住
Liberty_yes的博客
10-31 2472
elementui this.$message消息提示被弹框遮住,报错：`TypeError: _this3.$message is not a function`
RuoYi - plus开源后台管理系统（包含API接口服务）由java开发基于SpringBoot2.x.zip
03-23
RuoYi - plus开源后台管理系统（包含API接口服务）由java开发基于SpringBoot2.x
ElementUI Message 消息提示，多个显示被覆盖的问题
前端笔记——放弃很容易,但坚持一定很酷
03-13 1364
代码：主要是在this.$message 方法外层加上 setTimeout 方法。
elementui 弹窗遮罩问题；Message层级问题（被遮罩、弹窗遮住，设置层级；弹窗内容被遮罩遮挡）
热门推荐
IT_dabai的博客
07-22 1万+
解决弹窗内容被遮罩遮住、弹窗层级样式不够问题 情况一：弹窗层级样式不够。elementui文档上，Message板块有写到可以提供自定义class。通过自己设置类名，可以对其设置相关css属性。 情况二： 弹窗内容被遮罩遮住。
Element-UI消息提示组件Message在Vuex中的调用实现
wpfLove的专栏
02-13 1万+
在最近的项目开发中，前端部分使用 Vue 开发，整个页面基于 Element-UI 实现。 由于是单页面多组件应用，使用了 Vuex 做状态管理。 为了页面交互的友好和风格的统一，消息提醒使用 Element-UI 的 Message消息提示， 不使用 window.alert this.$message({ showClose: true, message: '警告...
【前端】【vue-i8n】【element】Element 框架国际化配置指南：从 element-ui 到 element-plus
最新发布
qq_59344127的博客
03-05 2374
在全球化的大背景下，构建支持多语言的应用程序变得愈发重要。Element 作为一款广泛使用的前端 UI 框架，为开发者提供了便捷的国际化（i18n）解决方案。本文将详细介绍在 element-ui 和 element-plus 中如何进行按需加载里的 i18n 定制。
element-ui简介、安装和使用代码
alankuo的专栏
10-11 6748
Element-UI是一套基于Vue.js的桌面端组件库，由饿了么前端团队开源。它提供了丰富的组件，如按钮、表单、表格、菜单、对话框等，这些组件具有统一的视觉风格和交互设计，能够帮助开发者快速构建美观、易用的Web应用程序。
【解决】el-message消息弹框的显示被el-dialog覆盖（z-index导致）
qq_38969618的博客
08-06 9404
设置el-message的z-index为更大值即可。或设置el-dialog的z-index为较小值即可。
elementui的$message提示框被dialog遮罩层挡住问题解决
指尖笑
07-14 7129
elementui的$message提示框被dialog遮罩层挡住问题解决 问题： 最近碰到一个先执行this.$message提示内容，然后接着弹出dialog带遮罩层弹框。那么问题来了，message提示框会默认被dialog遮罩层挡住，代码如下： 原因： 由于都是弹框，问题肯定是出在z-index比重问题。由于用$message方式是写在js中而不是写在html中所以不是很好直接去改样式。 不过好在message组件中提供了customClass 属性，我们可以利用这个属性去添加一个z-index超
element UI【解决方案】消息弹框被对话框遮挡（$message消息框被dialog或$alert遮罩）
朝阳39的博客
01-27 3631
问题描述 同时弹出消息弹框和对话框时，消息弹框被对话框遮挡 问题原因 element UI默认给$message消息弹框动态添加的z-index值比对话框小 解决方案 给 $message 添加自定义样式 this.$message({ message: "我是消息", customClass: "myMessageClass" }); 划重点：必须是全局style，不能有scoped <style > /* 必须是全局style，不能有scoped */ .myMessageC.
关于Vue + element 中 message提示被dialog的遮罩层挡住问题
HHaox_x的博客
04-19 2680
message提示信息 提升到当前页面最高
vue 使用elementUI-loading封装全局遮罩层
weixin_56898375的博客
07-01 858
遮罩层全局封装使用 vue 使用elementUI-loading封装全局遮罩层
解决element -ui 中message在dialog遮盖层下面
Bitter的博客
06-24 4305
解决element -ui 中message在dialog遮盖层下面
element-ui弹出层置于遮罩层下面问题
coding
06-21 8595
有时页面结构复杂，多个嵌套MessageBox之类的情况时，MessageBox 弹框会出现置于遮罩层下面的问题，需要添加 :modal-append-to-body="false"属性。 注：该属性可以将弹出层的遮罩层在body内生成。 代码实例 <el-dialog title="渠道" :visible.sync="Show" :modal-append-to-body...
Element-ui组件，复制Drawer 抽屉里面的内容，鼠标光标不小心移到遮罩层后，鼠标释放抽屉以及遮罩层被关闭的解决方法
weixin_48642777的博客
09-07 1330
element-ui组件，Drawer 抽屉中复制里面的内容，或者鼠标光标全选里面的内容，鼠标光标不小心移到遮罩层后，鼠标释放抽屉以及遮罩层被关闭的解决方法
elementui弹出框被遮罩层挡住的问题
nss33678的博客
03-28 1608
2，:modal-append-to-body='false'或者:append-to-body='true'，改变他的这个属性就好。但是遮罩层的范围会变。1，el-dialog直接放在组件最外层div中，就不会出现遮罩问题。偶然发现有个页面会出现这种问题，有两个解决方法。
element-ui drawer 穿过遮罩层点击遮罩层下面的元素
06-03
对于element-ui的drawer组件，它默认有一个遮罩层，使得用户只能与drawer交互，而不能与遮罩层下面的元素交互。如果你想要实现穿过遮罩层点击遮罩层下面的元素，可以使用drawer组件的mask-closable属性。将mask-closable设置为false，即可实现穿过遮罩层点击遮罩层下面的元素。具体实现方式如下： ```html <el-drawer :mask-closable="false"> <!-- drawer内容 --> </el-drawer> ``` 这样设置之后，用户就可以点击遮罩层下面的元素了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值