2022-06-20 工作记录--Vue-ElementUI-嵌套Dialog打开后自带一个遮罩层

最新推荐文章于 2024-01-16 09:54:02 发布
最新推荐文章于 2024-01-16 09:54:02 发布
阅读量514 收藏 3
点赞数 7
分类专栏： 工作-vue 文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48850734/article/details/125412620
版权

ElementUI-嵌套Dialog打开后自带一个遮罩层

一、问题分析

如下图，在el-dialog的基础上再打开一个el-dialog时，会有一个遮罩层，需要点击一下，这个遮罩层才会消失，随之 嵌套的Dialog才会变明亮🔆。

在这里插入图片描述

二、解决方法

如下图，参考文档，可知解决方法喔~

在这里插入图片描述

三、最终效果

在这里插入图片描述

小呀小萝卜儿
关注
专栏目录
基于Vue-elementUI的admin共享车位后台设计源码
09-26
该项目是一款基于Vue和Vue-elementUI框架的共享车位后台管理系统的设计源码，总文件量达到90个，其中包含31个JavaScript文件、20个Vue组件文件、6个SCSS样式文件、5个SVG矢量图形文件、4个JPG图片文件、3个JSON数据...
Vue3 如何实现一个带遮罩的 dialog 对话框
fang_my的博客
02-14 2768
目前的代码只是一个很粗糙的实现，更加具体实用的功能还需读者根据自己项目的需求自行完成。下面是文件的代码。读者可根据需要自行查阅。import {} //dialog 消失的方法 }
vue el-dialog 实现弹窗无限嵌套（点击弹窗弹出新的弹窗，可以一直点击）
记录常见的问题以及解决办法
03-23 9410
创建文件夹 testDialog 文件夹 根据自己需要创建文件夹（这个是我用于演示的，根据自己项目自行创建就可以）要求点击数据展示弹窗，弹窗中数据点击显示新的弹窗，里面的弹窗还可以继续点击新的弹窗，可以无限制的嵌套弹窗。剩下两个文件按照这个自行创建即可 想无限制循环 最后一个文件的弹窗写到第一个 就可以无限制嵌套！原因：因为有些弹窗既是父弹窗又是子弹窗，所以使用的时候会报错，报一个循环嵌套错误。可以一直无限制的点击 无限制的嵌套。commonData.js 文件。
vue中elementUI组件el-dialog嵌套 样式问题
weixin_43835827的博客
04-20 5032
遇到的问题: 1.内外dialog共两层遮罩，内层dialog被灰色遮罩遮盖， 2.内层dialog继承了外层dialog的样式 解决： 1.在内层dialog上添加append-to-body属性， 2.内层dialog样式修改，在内层dialog外包一层div并加class类 *不要在有scoped的style标签下写，因为是局部的，样式不会生效* <style> ...
el-dialog遮罩层的问题
simple_smile1208的博客
08-30 8566
在一个el-dialog中点击再出现一个el-dialog时会出现一个遮罩层的问题 解决方法：添加:append-to-body="true"属性
关于el-dialog上额外多了一层遮罩层
weixin_47175934的博客
11-09 1639
关于el-dialog上额外多了一层遮罩层
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
10-16
除了`el-dialog`弹窗组件外，文件中也提及了`this.$confirm`方法，这是Vue.prototype的一个方法，用于调用Element UI提供的一个确认框对话框。在文件中并没有给出`this.$confirm`的直接代码示例，但可以了解到它是...
基于vue v-for 多层循环嵌套获取行数的方法
10-17
在进行Vue多层循环嵌套时，获取行数是常见的需求，我们可以通过数学公式直接计算，或者使用一个方法来动态返回当前的行号。两种方法各有优劣，数学公式方法适用于结构较为固定的场景，而方法计算适用于需要动态操作...
vue-sku-form:基于 Vue & ElementUI 的电商 SKU 表单配置组件
05-29
Vue-Sku-Form 是一个专为电商领域设计的前端组件，它基于 Vue.js 框架和 ElementUI 组件库，旨在提供一个高度可配置的 SKU（Stock Keeping Unit，库存单位）表单生成器。在电商网站中，SKU 通常用于唯一标识商品的...
vue-element-admin:基于vue+elementUI的后台管理系统模板
05-30
vue-element-adminA Vue.js projectBuild Setup# install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run build# build for ...
el-dialog嵌套使用，只显示遮罩层的问题
最新发布
weixin_44295184的博客
01-16 742
el-dialog嵌套使用，只显示遮罩层的问题
el-dialog嵌套使用
qq_44860613的博客
10-15 9500
最近使用vue+elementUI做项目，使用过程中很多地方会用到dialog这个组件，有好几个地方用到了dialog的嵌套，刚开始使用不是很熟练，也是走了很多小弯路，现在总结一下自己使用的一些小问题。 1.dialog嵌套时， ...
vue+element-ui——双层对话框（dialog）嵌套，打开内层dialog时，需点击才可高亮（解决办法）
HoShining日志
12-18 2228
外层dialog： 点击后出现内层dialog，外层我去掉了原先的白色背景，打开内层后，背景也变成了白色。 内层dialog： 修改方法： 在内层dialog引入时，增加append-to-body； <el-dialog :visible.sync="dialog" append-to-body :before-close="handleClose"> 然后就出现这样啦！ ...
vue dialog嵌套，遮罩层遮盖住对话框的解决方法
且听风吟的博客
09-03 6820
官方文档中的嵌套dialog例子指出了： 页面效果如下：
vue中使用elementui的el-dialog遮罩问题
08-29 4286
elementui中的el-dialog有时候会出现以下这种问题，内容在遮罩阴影之下的情况 解决这种情况的方法很简单，在el-dialog标签中添上这个:append-to-body="true"属性即可，如下： :append-to-body="true"
vue element-ui的嵌套dialog遮罩层
热门推荐
weixin_43823766的博客
06-28 1万+
vue element-ui的嵌套dialog遮罩层打开dialog时，遮罩层直接将全部body遮住内嵌dialog关闭时父级dialog依旧被遮罩层遮住 自己做项目时需要用到嵌套dialog，但是遮罩层的问题踩了2次坑，自己解决办法如下 打开dialog时，遮罩层直接将全部body遮住 这里需要加一句 :modal-append-to-body=‘false’ 就可以解决遮罩层罩住整个body...
vue+elementUI项目中，el-dialog弹出框被遮罩层覆盖
杜鲁阳的博客
06-19 8829
vue+elementUI项目中，el-dialog弹出框被遮罩层覆盖 一、问题表现 el-dialog弹出框被遮罩层覆盖 但是，浏览器调试时，明明遮罩层比弹出框z-index层级小【低一层】。 二、解决方法 在el-dialog标签里添加 :modal-append-to-body='false’ :modal-append-to-body='false' 成功被解决。 三、解决原理：...
【bug】关于el-dialog上额外多了一层遮罩层
m0_66340074的博客
12-28 5041
2.如果是el-dialog里又嵌套了一层el-dialog弹框，一定要把内层的dialog加上append-to-body="true",插入至 body 元素，保证层级的正确(elementUI的组件内有更多解释)后来听说用absolute绝对定位也会出现这样的问题，我一看自己的代码，原来是给最外面的div设定位为fixed了，无论是绝对定位还是固定定位，都会使元素脱离文档流，删掉换个布局去实现就好了。
element-ui嵌套弹框遮罩层解决
骨子里的偏爱
03-07 400
element-ui嵌套弹框遮罩层解决
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小呀小萝卜儿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值