vue自适应pc端界面

页面高度自适应element-ui框架：应用于vue后台管理系统，大屏，整理源码如下：

<template>
  <div class="hello">
    <el-container>
  <el-header class="Header">Header</el-header>
  <el-main :style="height" class="main">Main</el-main>
  <!-- <el-footer>Footer</el-footer> -->
</el-container>
  </div>
</template>
<script>

export default {
  data () {
    return {
      //高度自适应
      height:{
        height:''
      },
      //高度自适应：
      clientHeight:document.documentElement.clientHeight
    }
  },
  created(){
  
  },
  mounted(){
    this.getHeight()
   window.onresize = () =>{
     this.clientHeight = document.documentElement.clientHeight
   }
  },
  methods:{
    //获取高度方法：
    getHeight(){
      this.height.height = window.innerHeight - 50 + 'px'
    }
  },
  watch:{
    clientHeight(newValue,oldValue){
      console.log(newValue)
      var h = newValue - 50
      this.height.height = h + 'px'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello{
  width:100%;
  border:1px solid red;
  box-sizing: border-box;
  position: absolute;
  top:0px;
  left:0px;
}
.Header{
  background:green;
  height:50px;
}
.main{
  height:calc(100% - 50px);
}
</style>

image.png