el-dialog 内嵌inframe

`el-dialog` 是 Element UI 中的一个轻量级对话框组件，在 Vue.js 中常用于弹出模态窗口进行交互。当你想要在 `el-dialog` 中嵌入 iframe（帧），通常是为了展示外部网页内容或者隔离页面间的加载独立性。下面是如何在一个 `el-dialog` 中插入 iframe 的基本步骤：

1. 首先，引入所需的 Element UI 和 Vue.js 文件。

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<link rel="stylesheet" href="https://unpkg.com/@element-ui/core/lib/index.css">

2. 然后，在 Vue 实例中创建 `el-dialog` 组件，并设置其内容为一个 iframe 元素。

<template>
  <div id="app">
    <button @click="showDialog">打开对话框</button>
    <el-dialog :visible.sync="dialogVisible" width="80%" height="50%">
      <iframe :src="iframSrc" frameborder="0" sandbox="allow-scripts allow-same-origin"></iframe>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      iframSrc: 'https://example.com', // 这里替换为你想嵌入的实际 URL
    };
  },
  methods: {
    showDialog() {
      this.dialogVisible = true;
    }
  },
};
</script>

在这个例子中，当点击“打开对话框”按钮时，会显示对话框并加载指定的 iframe。