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="850px;height:700px;"></iframe> </el-dialog>