发现网络上使用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>

最后上效果图,大功告成!

Logo

前往低代码交流专区

更多推荐