ElementUI中使用对话框Dialog时打开时出现了遮罩层问题解决方案

最新推荐文章于 2024-02-19 11:52:52 发布
最新推荐文章于 2024-02-19 11:52:52 发布
阅读量4.8k 收藏 24
点赞数 20
分类专栏： Vue 文章标签： vue javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42965737/article/details/114398845
版权

出现的问题：打开对对话框时出现
在这里插入图片描述
需要点击一下页面才正常，结果如下：
在这里插入图片描述
找了一种方法是在标签中加上:modal-append-to-body="false",虽然在打开对话框时遮罩层消失，但是关闭对话框时遮罩层无法消失。
在这里插入图片描述
这就纠结了，这里的是对话框嵌套，有两层嵌套。这里需要另一种方法来解决：
在这里插入图片描述
在这里插入图片描述
加上：

:append-to-body="true"
墨者大数据
关注
  • 20
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
专栏目录
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
主要介绍了基于element-ui对话框el-dialog初始化的校验问题解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
element-ui框架的el-dialog弹出框被遮罩层挡住了
qq_31889029的博客
08-21 1069
版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/Mr_JavaScript/article/details/80888681 ———————————————— 版权声明：本文为CSDN博主「蔚莱先森」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接及本声明。 原文...
Element ui 丨Dialog：使用Dialog组件会出现遮罩层在Dialog上方的解决方案
最新发布
weixin_39142106的博客
02-19 266
问题：使用Dialog组件会出现遮罩层在Dialog上方?解决方案：添加append-to-body属性。
学习YUI.Ext 第四天--对话框Dialog的使用
10-31
学习YUI.Ext 第四天--对话框Dialog的使用
解决Vue开发中对话框被遮罩层挡住的问题
01-19
在Vue的开发中，一旦我们用到对话框，经常出现的问题是对话框被遮罩层挡住，无论是Element-UI dialog还是bootstrap的Modal，如下图所示： 造成这个问题的原因是对话框组件的父元素的position有fixed或者relative值，比较简单易行的办法如下：对于bootstrap Modal需要添加css语句 .modal-backdrop {  z-index: -1;} 而对于Element UI该组件已经在属性层面提供了解决办法，只要添加:modal-append-to-body=false就可以了。 总结 以上所述是小编给大家介绍的解决Vue开发中对话框
Android中Dialog对话框的使用小结
08-30
主要给大家总结了一些关于Android中Dialog对话框的使用方法，这其中包括普通对话框、确定取消对话框、多按钮对话框、列表对话框、带Adapter的对话框、单选对话框以及多选对话框等，需要的朋友可以参考学习，下面来一起看看详细的介绍吧。
element-ui中的dialog去掉遮罩层
Codernmx
01-21 7613
element ui是基于vue的一套前端可视化组件库，官方文档给出的dialog下的modal属性是一个布尔值，需要使用v-bind指令进行监听，在前面加个“：”就可以去掉遮罩层。 :modal='false'
elementplus dialog对话框遮罩不挡住导航
niyooooo的博客
04-25 1501
刚开始解决方式如下 ::v-deep .el-overlay { position: absolute; } 这样确实左侧导航和上方标签不会被遮罩遮挡，但是点击无效果 于是查看弹出框的z-index为2013 导航和标签的z-index只有1000左右，更改导航和标签的z-index大于对话框的就行啦，这样打开对话框后导航和标签也可以点击了。 ...
Vue中ElementUI的dialog弹出框被遮罩层盖住
UserGuan的博客
03-27 4893
点击选择车队进行搜索查询后弹出框被遮罩层盖住 原因一：因为dialog的组件外层div设置了 position: absolute; 属性，所以导致遮罩层会在最上面 原因二：因为是 dialog 里面又嵌套了一个dialog，需要在里面的dialog加上:append-to-body="true" :append-to-body="true" 我的是因为第二个原因导致di...
element-ui中弹框dialog在遮罩内部显示，需要点击一下页面才能正常显示
憧憬是碎了满地凉凉的宝石
10-28 1592
修改之前 修改之后 本项目使用了element-UI中的组件Dialog，需要在el-dialog标签中添加代码 :append-to-body="true" 修改前： <el-dialog title="点播提示" :visible.sync="centerDialogVisible" width="30%" center> </el-dialog> 修改后： <el-di.
element ui弹窗出现遮罩的解决办法
MBAI的博客
05-07 456
在打开的那个弹窗加上append-to-body就好，原因看参考官方文档
element-ui dialog被遮罩覆盖问题
Mr__FFF的博客
01-19 1718
Element-ui dialog被遮罩覆盖问题打开第一个dialog没问题，但是从第一个窗口里再打开第二个dialog时被遮罩住 打开第一个dialog没问题，但是从第一个窗口里再打开第二个dialog时被遮罩住 找了挺多文章，发现都是说append-to-body的问题，但是我自己改了一遍，发现这几层的z-index值老是赋值不对。就换了个思路，发现是dialog子组件写在了父组件dialog的里面，这样是错的！！将dialog子组件从dialog父组件移出来后就正常了，自己搞了个乌龙~~ ...
element ui 弹窗遮罩层在弹出层的上面。点击关闭弹窗弹窗关闭了但是遮罩层没关
热门推荐
肖肖肖丽珠的博客
04-01 1万+
首先弹窗一个水平测试报告。然后点击查看解析又可以弹窗一个框 这时我们发现这个解析的框被外面一个遮罩层挡住了。 我把这个水平测试报告的弹窗写在一个组件里面。在组件里面又写了解析的弹窗。 首先查看官网的element-ui的el-dialog的一些属性 首先想到是遮罩层的问题所以试了一下在解析的弹窗上加上:modal-append-to-body="false" ...
Vue + Bootstrap|Element UI——模态框被遮罩层遮盖问题解决方案
无限迭代中......
03-21 2602
问题描述 问题分析 1）若dialog弹出框，它的遮罩层就会被插入到body标签下（即与组件所在的最外层div同一层级） Element UI中设置了modal-append-to-body='true'（默认）属性 2）dialog的显示层和遮罩层都设置了position:fixed，当然显示层的z-index肯定要比遮罩层的大，才能正常的显示弹出框。 问题就出在此处，若dia...
vuex之刷新页面时token丢失问题
weixin_42965737的博客
03-14 4925
前端项目，使用vuex作为状态存储，但是遇到一个问题，就是在刷新页面时出现了丢失token的问题，下面给出完美的解答： 1.可以使用缓存将vuex中的state缓存起来，可以使用localStorage和sessionStorage。cookie不适合存储。 localStorage是长期存储，sessionStorage是会话期间存储，这里使用sessionStorage. 在这里插入图片描述 2.上代码 App.vue中添加 mounted()和methods，在刷新的时候进行持久化。 <te
ElementUI组件中的Form表单的input输入框无法重置的原因
weixin_42965737的博客
11-05 2261
1.在表单中加上关联ref=“关联的表单数据” 如图中的ref=“searchForm”不能缺少，主要是为了关联表单数据,也必须和:model="searchForm"一致。 2.input输入框上要加上prop=""属性 主要这个输入框的内容想要重置，就必须加上这个属性，而且要与表单中的属性对应。 3.就是点击事件的函数要加上表单的名称 而且需要用引号引起来，表明是对这个表单数据进行重置。 4.如果以上的步骤都没有问题，就需要检查表单的名称是否和自己定义的一致。 ...
使用Vue开发前端页面（elementUI）进行分页时出现的搜索分页与全部数据分页的逻辑问题
weixin_42965737的博客
10-27 2259
问题涉及了两个分页的部分，搜索分页和全部数据分页。然而这两个操作都需要进行分页且使用同一个分页组件，所以需要进行区分。 1.首先顶一个变量用来区分搜索与查询全部数据 data() { pageIsOrNot: false, } 2.当搜索时需要将这个变量变为True this.pageIsOrNot = true; 3.实际代码部分： //搜索部分 search() { //也需要考虑分页的情况 // 执行搜索操作之前需要将currentPage进行初始化，否则可能出现查不到数据的情
elementui多个对话框出现相同的内容怎么解决
09-10
### 回答1： 如果你在使用 ElementUI 中出现了多个对话框出现相同的内容，可能是因为你在多个对话框中使用了同一个变量来保存内容。 解决这个问题的方法是，为每个对话框创建一个独立的变量来保存内容。你可以在创建对话框时，为对话框传递一个唯一的标识符，然后在保存内容时，使用该标识符来区分不同的对话框。 例如，你可以这样创建一个对话框： ``` <el-dialog :visible.sync="dialogVisible" :title="title" :close-on-click-modal="false"> <span>{{ content }}</span> </el-dialog> ``` 在数据中保存对话框的内容和标识符： ``` data() { return { dialogVisible: false, dialogs: [ { id: 'dialog1', title: 'Dialog 1', content: 'Content for Dialog 1' }, { id: 'dialog2', title: 'Dialog 2', content: 'Content for Dialog 2' }, { id: 'dialog3', title: 'Dialog 3', content: 'Content for Dialog 3' }, ] } }, ``` 然后在打开对话框时，根据标识符来设置对话框的内容： ``` openDialog(id) { const dialog = this.dialogs.find(dialog => dialog.id === id) this.title = dialog.title this.content = dialog.content this.dialogVisible = true } ``` 这样，每个对话框就可以保存独立的内容，避免出现相同的内容。 ### 回答2： 当elementUI中的多个对话框出现相同的内容时，可以通过以下几种方式来解决： 1. 分别创建不同的对话框组件：在使用elementUI的对话框组件时，可以为每个对话框创建一个独立的组件。这样每个对话框都有独立的组件实例，可以独立传入不同的内容，避免内容重复问题。 2. 动态生成对话框内容：可以使用JavaScript代码动态生成对话框的内容。在打开一个对话框之前，根据需要生成不同的内容，并通过对话框组件的参数来传入。这样每次打开对话框时，都可以传入不同的内容，从而解决内容重复的问题。 3. 利用elementUI的动态组件功能：elementUI提供了动态组件的功能，可以根据需要在对话框内部动态切换不同的组件。可以根据需要创建多个不同的组件，然后根据情况动态切换展示内容，避免内容重复问题。 综上所述，解决elementUI多个对话框出现相同内容的问题可以通过创建独立的对话框组件、动态生成对话框内容或利用动态组件功能来实现。根据具体情况选择合适的解决方案，可以有效避免对话框内容重复的问题。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值