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>

版權聲明：本文為CSDN博主「雲凝汐辰」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_39865491/java/article/details/88050596