Vue：Element-UI 弹出窗口el-dialog使用iframe加载外部页面内容

想要实现如下效果

在页面中点击链接，弹出窗口，窗口中加载指定的页面内容

1.vue文件内容

html部分的代码

<el-link type="success" @click="test">主要链接</el-link> <el-dialog title="提示" :visible.sync="dialogVisible" width="80%" height="100%" :before-close="handleClose" > <iframe src="http://www.baidu.com" frameborder="0" width="100%" height="600px"></iframe> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="dialogVisible = false">确 定</el-button> </span> </el-dialog>

js部分的代码

export default { name: "indexJK", data() { return { name: "indexJK", dialogVisible: false, //弹出框 }; }, methods: { test() { this.dialogVisible = true; } } }; </script>

2.运行效果