Vue.js动态获取浏览器高度、宽度并进行实时修改DOM元素高度-蒲公英云

Vue.js动态获取浏览器高度、宽度并进行实时修改DOM元素高度

た入场券 2021-07-26 13:46 1170阅读 0赞

需求：项目中有高度、宽度自适应需求，需要适应不同分辨率的高度及宽度，在不同分辨率下效果区别不会很大

html代码如下：

<template> 
    <div id="home">
       <div class="head"  > 
             <v-head></v-head>
       </div>
          <div class="content" :style="GetWindowInfo" >
             <router-view></router-view>       
       </div>
    </div>   
</div>

js代码如下：

<script>
export default { 
  data () { 
　　return { 
     GetWindowInfo:{ 
            height:'',  //动态获取content高度
            width:''    //动态获取content宽度
        },
　　}
  },
  methods:{ 
    GetWindowInfo(){ 
            // 获取浏览器高度，减去顶部导航栏的值70（可动态获取）,再减去head-DIV高度值80
        this.GetWindowInfo.height=window.innerHeight-70-80+'px';
        this.GetWindowInfo.width=window.innerWidth+'px';
    }
  },
  created(){ 
    window.addEventListener('resize', this.GetWindowInfo); //注册监听器
    this.GetWindowInfo() //页面创建时先调用一次
  },
  destroyed(){ 
    window.removeEventListener('resize', this.GetWindowInfo)
  }
}
</script>

css代码：

<style scoped> .home{ 
overflow:scroll; 
text-align: center;
background: rgb(255, 255, 255);
}
/*头DIV*/
.head{ 
background: #ffffff;
margin:auto;
width:1000px;
height:80px;
}
/*内容DIV*/
.content{ 
overflow:scroll;
overflow-x:hidden;
margin: 0 auto;    
text-align: center;    
background: #ffffff;
}
</style>