ElementUI el-dialog中嵌套子页面

2021-5-13补充：这个方法随着我对vue学习的深入此方法已经不是最佳解决方法，最新解决方法请看我最新一篇博客：

https://www.cnblogs.com/jyj666/p/14722294.html

2021-4-5补充：这篇文章是我去年刚学vue的时候写的，随着对vue.js的继续深入，其实在dialog中嵌套子页面完全可以使用组件的方式，将这个html页封装成一个子组件，因此以下方法适合组件无法传值时使用，不首先推荐！

最近接到个需求写一个拍照界面但是要有回弹效果，本来我使用的是window.onload函数来实现页面的跳转，但是后来因为要涉及到回弹，再加上本身系统是使用ElementUI的UI框架，然后我老大就i推荐我使用el-dialog。

 这边前前后后踩了很多坑，关于如何使用el-dialog详见官方文档：https://element.eleme.cn/#/zh-CN/component/dialog#events

这里我说提几个注意点：首先！我的系统是主页面套好几个组件，然后组件里有按钮再点击弹出el-dialog的但是这个el-dialog中需要有和硬件交互的部分！！！所以要引入原生js，！！！重点来了！！！引入原生js以后！！！你会发现el-dialog正常都是里面嵌套一个div...你里面压根没法像html中使用<Script></Script>然后你需要引用的这个原生js脚本你会发现放在原来的CSTHML视图里面会失效，放在layout母版页里面也会失效。。。反正就各种无效。。。最后我使用了<iframe>标签,就是事先写好一个html页，然后将HTML页嵌套进<iframe>标签内效果图：

 

代码：

<el-dialog title="拍照" v-bind:visible.sync="dialogVisible"  v-bind:on="test">
            <iframe src="~/Scripts/gpyJS/gpy.htm" style="width:850px;height:700px;"></iframe>
        </el-dialog>