首页 > 其他分享 >el-dialog中嵌入iframe宽度、高度自适应

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

时间:2022-12-06 11:25:08浏览次数:32  
标签:el style oIframe dialog iframe const document

<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'; //数字是页面布局高度差
  });
},

标签:el,style,oIframe,dialog,iframe,const,document
From: https://www.cnblogs.com/xl4ng/p/16954669.html

相关文章