发现网络上使用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>接下来是子页面，从列表页面的按钮绑定方法，直接调用父页面打开弹窗的方法:
- 这里新增和修改页面使用了同一个，新增传入module为add，修改的话直接传入id
- 有一个问题需要注意，修改页面每次需要强行刷新一次，否则回显数据会出问题，总是带着上次回显的数据提交
- 直接使用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>最后上效果图，大功告成！文章来源：https://www.toymoban.com/news/detail-413628.html
文章来源地址https://www.toymoban.com/news/detail-413628.html
到了这里，关于vue + Element-UI下iframe子页面弹窗蒙层只能遮罩子页面问题解决的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
