溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
下面給大家分享兩種方法來介紹Vue 實時監(jiān)聽窗口變化 windowresize，具體內(nèi)容如下所示：
方法一：
First-step : 定義變量
data(){
return{
formLabelWidth : '123px'
}
},
Second-step: 根據(jù)生命周期 在mounted 中綁定 窗口變化
mounted(){
const that = this
window.onresize = () => {
return (() => {
window.screenWidth = document.body.clientWidth
that.screenWidth = window.screenWidth
})()
}
},
Third-step: 綁定監(jiān)聽 watch
watch: {
screenWidth (val) {
if (!this.timer) {
this.screenWidth = val
this.timer = true
let that = this
setTimeout(function () {
// that.screenWidth = that.$store.state.canvasWidth
console.log(that.screenWidth)
// that.init()
that.timer = false
}, 400)
}
}
},
方法二：在vue.2x里面時候，mounted 里面可以直接掛載 window.onresize事件。全局監(jiān)聽
mounted(){
window.onresize = () => {
return (() => {
this.handleLableWidth();
})()
}
this.handleLableWidth();
},
完全可以做到檢測窗口變化
總結(jié)
以上所述是小編給大家介紹的Vue 實時監(jiān)聽窗口變化 windowresize的兩種方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網(wǎng)站的支持！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
