vue 下 element-ui 能否实现类似layer.open打开其他URL弹出层的效果

Question

vue 下 element-ui 能否实现类似layer.open打开其他URL弹出层的效果
layer.open里可以使用content可以直接访问到其他URL
不知道element-ui能否实现？

layer.open({
  type: 2,
  area: ['700px', '450px'],
  fixed: false, //不固定
  maxmin: true,
  content: 'test/iframe.html'
});

Answer 1

dialog里面加iframe
https://jsfiddle.net/ay5hu1oz/

<el-dialog title="提示" :visible.sync="dialogVisible">
  <div class="dialog-content">
    <iframe src="https://www.baidu.com" frameborder="0" width="100%"></iframe>
  </div>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </div>
</el-dialog>

Answer 2

iframe是一个极其不友好的交互，不建议使用，据我所知，element-ui 也没有提供这样的一个组件，
如果一定要使用，建议：
使用element-ui 的dialog配合原生iframe，来实现你希望的效果

Answer 3

调用$prompt方法即可打开消息提示，它模拟了系统的 prompt。可以用inputPattern字段自己规定匹配模式，或者用inputValidator规定校验函数，可以返回Boolean或String，返回false或字符串时均表示校验未通过，同时返回的字符串相当于定义了inputErrorMessage字段。此外，可以用inputPlaceholder字段来定义输入框的占位符。

<template>
<el-button type="text" @click="open3">点击打开 Message Box</el-button>
</template>

<script>
export default {

methods: {
  open3() {
    this.$prompt('请输入邮箱', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消'
    }).then(({ value }) => {
      this.$message({
        type: 'success',
        message: '你的邮箱是: ' + value
      });
    }).catch(() => {
      this.$message({
        type: 'info',
        message: '取消输入'
      });       
    });
  }
}

}
</script>