vue組件和頁面的高度根據屏幕大小自適應

網頁可見區域寬：document.body.clientWidth
網頁可見區域高：document.body.clientHeight
網頁可見區域寬：document.body.offsetWidth (包括邊線的寬)
網頁可見區域高：document.body.offsetHeight (包括邊線的寬)

 

1、data中定義clientHeight變量：

  data() {
    return {
      clientHeight: document.body.clientHeight
    }
  }

2、實時改變clientHeight的值：

  mounted() {
    const that = this
    window.onresize = () => {
      return (() => {
        window.screenHeight = document.body.clientHeight
        that.clientHeight = window.screenHeight
      })()
    }
  },
  watch: {
    clientHeight(val) {
      // 為了避免頻繁觸發resize函數導致頁面卡頓，使用定時器
      if (!this.timer) {
        // 一旦監聽到的screenWidth值改變，就將其重新賦給data里的screenWidth
        this.clientHeight = val
        this.timer = true
        let that = this
        setTimeout(function() {
          // 打印screenWidth變化的值
          console.log(that.clientHeight)
          that.timer = false
        }, 400)
      }
    }
  }

3、給需要自適應高度的div添加:style屬性：

  <div class="review-options-details" :style="{ height: clientHeight-194 + 'px' }">
　　　　
　</div>