vue中,(iframe)如何实现一个页面跳转链接,点击链接不是新开一个页面,而是在当前页面显示
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
昨天突然来一个需求,管理系统中,点击页面返回的接口信息,是一个链接,但是你不能去跳转到另一个页面,而是点击的时候,如果有这个链接,在当前页面进行显示,就像是这个页面的内容一样
我们用到的有iframe
<el-tab-pane label="风控信息" name="risk">
<div style="width:1200px;height:1200px">
<iframe :src="externalLink" frameborder="0"></iframe>
</div>
</el-tab-pane>
externalLink就是你拿到的http或者https的链接值
先给iframe一个固定的宽高值,保证他能正确的显示出来
/* 这里是一些样式,您需要根据实际情况来定制 */
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
display: flex;
justify-content: center;
align-items: center;
}
iframe {
width:100%;
height: 100%;
}
/* 结束 */
样式也要携带进去,完美解决!
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)