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

 首先是html  这个没啥说的

 

编辑

      

        

          
        
      

接下来是 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 的