发现网络上使用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>最后上效果图，大功告成！
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
