vue组件页面高度根据屏幕大小自适应

网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
我们将document.body.clientWidth赋值给data中自定义的变量：

data:{
  screenHeight: document.body.clientHeight
}

在页面mounted时，挂载window.onresize方法：

mounted () {
  const that = this
  window.onresize = () => {
    return (() => {
       window.screenHeight = document.body.clientHeight
       that.screenHeight = window.screenHeight
    })()
  }
}

监听screenWidth属性值的变化，打印并观察screenWidth发生变化的值：

watch: {
 screenHeight (val) {
    // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
    if (!this.timer) {
      // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
      this.screenHeight = val
      this.timer = true
      let that = this
      setTimeout(function () {
        // 打印screenWidth变化的值
        console.log(that.screenHeight)
        that.timer = false
      }, 400)
    }
  }
}

最后别忘了在元素上赋值

<div :style="{ height: screenHeight + 'px' }">
	一段代码....
</div>

推荐文章：
https://www.yuque.com/*cai/study/ge4ido

mounted(){
   const that = this
   window.onresize = () => {
     return (() => {
       window.screenWidth = document.body.clientWidth
       that.screenWidth = window.screenWidth
     })()
   }
 }