el-dialog+iframe+height

`el-dialog` 是 Element UI 中的一个轻量级对话框组件，常用于显示模态窗口。当你想在弹出的对话框中嵌入一个 iframe 并设置其高度时，可以这样做：

首先，在 Vue.js 环境下，你可以创建一个 `el-dialog` 组件，并在其内容区域使用 `<iframe>` 标签。例如：

<template>
  <el-dialog title="Iframe Dialog" :visible.sync="dialogVisible">
    <div slot="footer" class="dialog-footer">
      <span @click="closeDialog">关闭</span>
    </div>
    <iframe :src="iframeSrc" :style="{ height: 'calc(100% - 64px)' }"></iframe> <!-- 高度计算减去 dialog 的默认头部高度 -->
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      iframeSrc: "https://example.com", // 替换为你需要的 iframe 地址
    };
  },
  methods: {
    closeDialog() {
      this.dialogVisible = false;
    }
  },
};
</script>

这里的关键点是 `:style="{ height: 'calc(100% - 64px)' }"`，`100%` 让 iframe 自适应父元素的高度，`- 64px` 减去了 dialog 的默认头部高度（一般为 64px），这样可以让 iframe 满足整个对话框的内容区域。