vue 中使用 iframe 嵌入网页,页面可自适应

在项目中遇到要嵌入第三方网页的需求,因为没有同第三方页面交互的需求,只需展示即可,所以最终决定使用 iframe 将第三方的网页嵌入到系统中,并且做到自适应效果。考虑到以后可能会增加嵌入页面的数量,故而封装成组件,供以后复用:

vue 中使用 iframe 嵌入网页,页面可自适应_第1张图片

上图为系统整体结构图,需要在内容区内展示 iframe 的内容,并且做到自适应。整体代码如下: