关于在vue中-iframe-宽高自适应显示的问题

最近在项目中遇到在vue中加入VR全景的要求，我是用iframe 来做的。

HTML

 <div style="height:auto;">
 //链接是随便找的
    <iframe style="width:100%;height:100%;" src="https://vr.justeasy.cn/view/616h03yem4343k19.html?from=timeline&isappinstalled=0" frameborder="0" scrolling="no" id="bdIframe">
    </iframe>
  </div>

JS

created() {
       this.getUrl();
    this.$nextTick(()=>{
        this.getCode();
    })
}

 mounted(){
    /**
     * iframe-宽高自适应显示   
     */
    const oIframe = document.getElementById('bdIframe');
    const deviceWidth = document.documentElement.clientWidth;
    const deviceHeight = document.documentElement.clientHeight;
    oIframe.style.width = deviceWidth + 'px';
    oIframe.style.height = deviceHeight + 'px'; 
  },

这是全部的代码了，瑕疵还是有很多的，效果算是实现了，测试的时候切换适配屏幕时记得刷新一下！！！