下面給大家分享兩種方法來介紹Vue 實時監聽窗口變化 windowresize，具體內容如下所示：
方法一：
First-step : 定義變量
data(){
return{
formLabelWidth : '123px'
}
},
Second-step: 根據生命周期 在mounted 中綁定 窗口變化
mounted(){
const that = this
window.onresize = () => {
return (() => {
window.screenWidth = document.body.clientWidth
that.screenWidth = window.screenWidth
})()
}
},
Third-step: 綁定監聽 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事件。全局監聽
mounted(){
window.onresize = () => {
return (() => {
this.handleLableWidth();
})()
}
this.handleLableWidth();
},
完全可以做到檢測窗口變化
總結
以上所述是小編給大家介紹的Vue 實時監聽窗口變化 windowresize的兩種方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
