el-dialog中嵌入iframe宽度、高度自适应

<el-dialog fullscreen title="设备拓扑" :visible.sync="sbtpVisible">
  <iframe id="bdIframe" frameborder="0" :src="sbtpIframeSrc"/>
</el-dialog>

showSbtp(row) {
  this.sbtpVisible = true;
  this.sbtpIframeSrc = "链接地址";
  this.$nextTick(() => {
    /**
     * iframe-宽高自适应显示
     */
    const oIframe = document.getElementById('bdIframe');
    const deviceWidth = document.documentElement.clientWidth;
    const deviceHeight = document.documentElement.clientHeight;
    oIframe.style.width = (Number(deviceWidth) - 50) + 'px'; //数字是页面布局宽度差值
    oIframe.style.height = (Number(deviceHeight) - 120) + 'px'; //数字是页面布局高度差
  });
},
posted @ 2022-12-06 11:05  xl4ng  阅读(1614)  评论(0编辑  收藏  举报