vue element-ui的嵌套dialog遮罩层

打开dialog时，遮罩层直接将全部body遮住
内嵌dialog关闭时父级dialog依旧被遮罩层遮住

自己做项目时需要用到嵌套dialog，但是遮罩层的问题踩了2次坑，leader让我不要用dialog，但是真的不太想重写(懒），自己解决办法如下

打开dialog时，遮罩层直接将全部body遮住

这个坑网上已经有很多篇文章介绍到过了，加一句 :modal-append-to-body=‘false’ 就可以解决遮罩层罩住整个body的问题，不多详细介绍了

// An highlighted block<el-dialog title="大dialog" :visible.sync="createOrderDialog" :modal-append-to-body='false'></el-dialog>

内嵌dialog关闭时父级dialog依旧被遮罩层遮住

打开内嵌dialog时，遮罩层将父级的dialog也一起遮住，并且关闭后也保持遮住的样子，搜了很多也没看到解决方法。因为看到element-ui文档里有介绍内嵌dialog需要加append-to-body，

将内层 Dialog 的该属性设置为 true，它就会插入至 body 元素上，从而保证内外层 Dialog 和遮罩层级关系的正确。

所以思路是试试也把父级dialog当成内嵌dialog 插入至body元素上，是不是也能保证和遮罩层及关系正确，发现行得通
解决方法如下：
在父级dialog里也加上append-to-body即可

// An highlighted block<el-dialog title="新建订单" :visible.sync="createOrderDialog" :modal-append-to-body='false' append-to-body><el-dialogwidth="30%"title="内层 Dialog":visible.sync="innerVisible"append-to-body><el-form :model="pump"><el-form-item label="活动名称" :label-width="formLabelWidth"><el-input v-model="pump.name" autocomplete="off"></el-input></el-form-item><el-form-item label="活动区域" :label-width="formLabelWidth"><el-select v-model="pump.region" placeholder="请选择活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="innerVisible = false">取 消</el-button><el-button type="primary" @click="innerVisible = false">确 定</el-button></div></el-dialog></el-dialog>

自己的小尝试，如有不对欢迎指正，希望能帮大家解决问题~

vue element-ui的嵌套dialog遮罩层相关推荐

Vue + Bootstrap|Element UI——模态框被遮罩层遮盖问题解决方案
问题描述问题分析 1)若dialog弹出框,它的遮罩层就会被插入到body标签下(即与组件所在的最外层div同一层级) Element UI中设置了modal-append-to-body='tru ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架
[Vue 快速入门]从零开始搭建 VUE + Element UI后台管理系统框架前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...
基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架引言心声现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
element-ui dialog遮罩层在最上层，关掉dialog遮罩层还在
代码中使用了dialog,dialog中点击某个按钮,又嵌套了一个dialog. 导致最外层的dialog出现后一直被遮罩层遮住,点击确定关掉dialog遮罩层还在. element-ui的dialo ...
【前端】Vue+Element UI案例：通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由
文章目录目标代码 0.动态地显示菜单:store 1.动态注册路由 2.解决刷新后摆平问题总代码本篇修改的代码文件 tab.js 参考视频: VUE项目,VUE项目实战,vue后台管理系统,前 ...
【前端】Vue+Element UI案例：通用后台管理系统-代码总结（已开源）
文章目录前言项目文件目录 api mockServe home.js permission.js index.js mock.js user.js assert components Common ...

vue element-ui的嵌套dialog遮罩层

vue element-ui的嵌套dialog遮罩层

打开dialog时，遮罩层直接将全部body遮住

内嵌dialog关闭时父级dialog依旧被遮罩层遮住

vue element-ui的嵌套dialog遮罩层相关推荐

最新文章

热门文章