Vue 中在全屏Dialog对话框 中 iframe 的高度自适应设置

 首先是html  这个没啥说的

 

<el-button @click="edit(scope.row)"
              type="text"
              size="small">编辑</el-button>
<div style="height: 100%">
      <el-dialog title="Activiti工作流在线流程设计编辑"
        :fullscreen="true"
        style="height:auto;"
        :before-close="handleClose"
        slot="header"
        :visible.sync="dialogIframeVisible">

        <div style="height:auto;"
          v-loading="loading">
          <iframe id="bdIframe"
            :src="'http://172.16.0.117:8080/editor?modelId=1'"
            frameborder="0"
            style="width:100%;height:100%;"
            scrolling="no"></iframe>
        </div>
      </el-dialog>
</div>

接下来是 data中的定义的值

export default {
data() {
    return {
      loading: true,
      searchCode: "",
      dialogIframeVisible: false,

        }
    }

}

然后再事件中开始设置 

edit() {
      this.dialogIframeVisible = true;

      setTimeout(() => {
        this.loading = false;
      }, 2000);

      setTimeout(function() {
        console.log("---------");
        /**
         * iframe-宽高自适应显示
         */
        const oIframe = document.getElementById("bdIframe");
        console.log(oIframe);
        const deviceWidth = document.documentElement.clientWidth;
        const deviceHeight = document.documentElement.clientHeight;
        // oIframe.style.width = Number(deviceWidth) - 220 + "px"; //数字是页面布局宽度差值
        oIframe.style.width = Number(deviceWidth); //数字是页面布局宽度差值
        oIframe.style.height = Number(deviceHeight) - 120 + "px"; //数字是页面布局高度差
    }, 1000);
},

说一下为什么这里有两个延时的方法  因为触发事件的时候 dialogI弹框里面拿不到 id为bdIframe 的 <iframe/>组件 

当我 this.dialogIframeVisible = true的时候 延时1秒 然后就可以拿到 iframe然后设置 它的宽和高。然后就可以自适应 屏幕大小了。

有问题的可以随时骚扰。