vue + Element-UI下iframe子页面弹窗蒙层只能遮罩子页面问题解决

发现网络上使用element-ui+vue做后台页面，基本要搭建vue脚手架，最近有个需求，就是使用element-ui+vue做一套静态页面，主区域使用firame，点击主菜单，可以进入子页面。

问题出现了，新增、修改、删除的弹窗，只能在iframe区域显示：

如何解决这个问题呢？果断各种查资料，希望CV大法可以解决，不过所有的解决方案都是在vue脚手架里面搭建项目，这又不符合目前的需求。

于是开始思考：

1.既然列表页可以使用iframe，那新增和修改是不是也可以使用iframe去解决？

2.如果弹窗使用iframe，那怎么才能让子页面唤醒父页面的弹窗呢？

3.每个子页面的数据不同，那么弹窗的大小也有不同，能否让每个页面唤起的弹窗大小可以不同呢（事实证明是可行的，在子页面将弹窗宽高传过去就可以了）？

想到这里，就开始行动！

主页面弹窗标签：

<!--dislogName：弹窗名称，可以从子页面传入，比如“新增部门”-->
<!--dialogVisible：弹窗状态，子页面调用父页面方法的时候，进行唤醒-->
<!--:width=big：弹窗宽度，单位百分比，子页面直接传参-->
<el-dialog :title=dislogName :visible.sync="dialogVisible" :width=big :before-close="handleClose">
      <!--:height=height：弹窗高度，单位像素，子页面直接传参-->
      <iframe :src="dialogUrl" width=100% :height=height frameborder="0" id="iframeUpdate"> 
      </iframe>
</el-dialog>

主页面vue数据及方法（注释写的十分清楚了）

<script>
    //这里务必要有个名字，将来子页面调方法需要使用
    var index = new Vue({
        el: '#app', 
        //数据部分
        data(){
            return{
                // 新增修改公用弹窗状态
                dialogVisible: false,
                //新增修改公用弹窗地址
                dialogUrl: ' ',
                //新增修改公用弹窗名称
                dislogName: '',
                //新增修改公共弹窗大小，big-宽，height-高
                big: '',
                height: '',
            }
        },
        methods{
                //打开新增修改公共弹窗的方法（在子页面中调用）
                dialog(url, name, big, height) {
                    //定义iframe标签位置
                    this.dialogUrl = url
                    //定义弹窗名字
                    this.dislogName = name
                    //定义弹窗宽度
                    this.big = big
                    //定义弹窗高度
                    this.height = height
                    //打开弹窗
                    this.dialogVisible = true
                },
        }
    })

</script>

接下来是子页面，从列表页面的按钮绑定方法，直接调用父页面打开弹窗的方法:

1. 这里新增和修改页面使用了同一个，新增传入module为add，修改的话直接传入id
2. 有一个问题需要注意，修改页面每次需要强行刷新一次，否则回显数据会出问题，总是带着上次回显的数据提交
3. 直接使用parent.index.dialog调用函数传参即可

<script>
    new Vue({
        el:"#xxx",
        methods{
            //打开新增修改弹窗的方法
            addDislog(module) {
                if (module === "add") {
                    //参数1：弹窗内引用的iframe地址
                    //参数2：弹窗名字
                    //参数3：弹窗宽度，根据页面内容定义
                    //参数4：弹窗高度
                    parent.index.dialog('pages/xxxx/add.html', '新增管理员用户', '40%', '400px');
                    //刷新修改页面(避免缓存数据导致修改回显失败)
                    parent.index.updateReload();
                } else {
                    //参数1：弹窗内引用的iframe地址
                    //参数2：弹窗名字
                    //参数3：弹窗宽度，根据页面内容定义
                    //参数4：弹窗高度
                    parent.index.dialog('pages/xxxx/add.html?id=' + module, '编辑管理员用户', '40%', '400px');
                    //刷新修改页面(避免缓存数据导致修改回显失败)
                    parent.index.updateReload();
                }
            },
        }
    })

</script>

最后上效果图，大功告成！