vue页面嵌套进非vue项目，弹框无法覆盖父窗口的解决方案

问题背景：

ui库使用的element-ui, 页面需要以iframe方式嵌入到jsp项目菜单下, dialog只能基于当前页面打开, 无法覆盖父页面窗口, 查询了element-ui的github issues github.com/ElemeFE/ele… 答案是不支持。

此处是网上相关的问题链接

解决办法:

1. 将dialog发布为一个页面
2. jsp项目创建真实的弹框, 包含打开，关闭等方法(弹框内容是vue发布的弹框页面)

• 弹框内容是个iframe, src属性值由vue页面提供
• ...

4. vue页面调研父窗口的弹框方法

代码:

// 打开弹框
    add() {
      top.openDialog && top.openDialog("/pDialog", 1);
    },
    ....
// 关闭弹框

   top.closeDialog && top.closeDialog(1);
   ....

掘金这会儿无法上传图片，效果图稍后带上~