【自適應】向來是前端工程師需要解決的一大問題——即便作為當今非常火熱的vue框架，也無法擺脫——雖然elementui、iview等開源UI組件庫層出不窮，但官方庫畢竟不可能滿足全部需求，因此我們可以通過【監聽窗口變化】達到想要的絕大部分自適應效果。

獲取窗口寬度：document.body.clientWidth

監聽窗口變化：window.onresize

同時回顧一下JS里這些方法：

網頁可見區域寬：document.body.clientWidth

網頁可見區域高：document.body.clientHeight

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

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

我們將document.body.clientWidth賦值給data中自定義的變量：

data:{

screenWidth: document.body.clientWidth

}

在頁面mounted時，掛載window.onresize方法：

mounted () {

const that = this

window.onresize = () => {

return (() => {

window.screenWidth = document.body.clientWidth

that.screenWidth = window.screenWidth

})()

}

}

監聽screenWidth屬性值的變化，打印并觀察screenWidth發生變化的值：

watch:{

screenWidth(val){

// 為了避免頻繁觸發resize函數導致頁面卡頓，使用定時器

if(!this.timer){

// 一旦監聽到的screenWidth值改變，就將其重新賦給data里的screenWidth

this.screenWidth = val

this.timer = true

let that = this

setTimeout(function(){

// 打印screenWidth變化的值

console.log(that.screenWidth)

that.timer = false

},400)

}

}

}

好！既然可以監聽到窗口screenWidth值的變化，就可以根據這個值設定不同的自適應方案了！

【舉個例子：div或img圖片高度隨寬度自適應】

div或img的寬度自適應很簡單——設定css里width屬性為百分比即可——但是高度呢？父級元素的高度并不是固定的(通常都是子級元素撐開的)

如上圖，一個類似【圖片庫】的功能，當屏幕放大縮小時，我們可以設置外層邊框(也就是灰色框框)的寬度為100%，以達到自適應——但高度無法設置，因此我們需要：

1.數據加載完后，獲取圖片(或外層框)的寬度

2.根據這個寬度，設置外層框的高度(如：寬度的60%)

3.監聽窗口screenWidth值的變化，每次變化都重新獲取寬度，并重新設置高度

所以，我們只需在前文代碼的基礎上，添加以下代碼，以確保屏幕縮放時，每次監聽寬度變化：

mounted() {

// 1、數據首次加載完后 → 獲取圖片(或外層框)寬度，并設置其高度

this.$nextTick(() => {

// 獲取圖片(或外層框)

let imgBox = this.$refs.imgBox

// 獲取其寬度

let wImgbox = imgBox[0].getBoundingClientRect().width

// 設置其高度(以寬度的60%為例)

this.imgBox.height = 0.6 * wImgbox + 'px'

})

// 2、掛載 reisze 事件 → 屏幕縮放時監聽寬度變化

const that = this

window.onresize = () => {

return (() => {

// window.screenWidth = document.body.clientWidth

// that.screenWidth = window.screenWidth

// console.log(that.screenWidth)

this.$nextTick(() => {

let imgBox = this.$refs.imgBox

let wImgbox = imgBox[0].getBoundingClientRect().width

this.imgBox.height = 0.6 * wImgbox + 'px'

})

})()

}

},

最終實現效果如下：

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的vue 组件监听页面切换_vue项目如何监听窗口变化，达到页面自适应？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。