- 现状(问题):
-
首先我的项目是基于[vue-element-admin](https://panjiachen.gitee.io/vue-element-admin-site/zh/)搭建的,项目中用了快捷导航(标签页)如图所示:
但是此时每个页面内的弹窗打开时会遮罩全局,那么顶部的快捷导航存在的价值就大打折扣。我们需要的是每个弹窗只遮罩本页面,不影响页面之间的切换。所以我们项目需要将弹窗展示方式处理一下。
- 探索方案:
-
由于顶部导航是否展示可以在src/setting.js文件中灵活配置,所以我也计划将弹窗展示也根据此配置来灵活适配,即需要顶部导航时弹窗就只遮罩在当前的页面,反之则弹窗遮罩全局。
- 实现方式
-
1、将el-dialog的modal-append-to-body属性设置为false
<el-dialog :modal-append-to-body="false" ****
2、设置全局样式
index.scss文件
--------------------------------------------
// 有tagview的时候,弹出层放在页面级别
// 注意:需要将el-dialog的modal-append-to-body属性设置为"false"
.hasTagsView {
.el-dialog__wrapper{
position: absolute; // 将原有的固定定位改为绝对定位
background-color:rgba(0, 0, 0, 0.5) // 给弹出层自己设置背景色,防止多个弹窗同时出现时关不掉modal层的问题,跟.v-modal设置样式解决的是同一个问题
}
.v-modal{
display: none !important;
}
}
3、完事,达到效果。
不需要顶部导航(tag-view)时的效果
需要顶部导航(tag-view)时的效果
注意事项:尽量不要写嵌套弹窗