基于vue-element-admin管理系统的弹出层的两种展示方式

- 现状(问题):

    -

        首先我的项目是基于[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）时的效果

      

注意事项：尽量不要写嵌套弹窗