vue怎么监听浏览器页面大小变化
时间: 2024-03-16 19:44:26 浏览: 84
在 Vue 中监听浏览器页面大小变化,可以借助 window 对象的 resize 事件。下面是实现的步骤:
在 mounted 钩子函数中,使用 addEventListener 方法为 window 对象添加 resize 事件监听器。
在 beforeDestroy 钩子函数中,使用 removeEventListener 方法移除 resize 事件监听器。
在 resize 事件处理函数中,更新 Vue 实例中的数据或执行相应的业务逻辑。
示例代码如下:
export default {
data() {
return {
windowWidth: 0,
windowHeight: 0
}
},
mounted() {
window.addEventListener('resize', this.handleResize)
this.handleResize()
},
beforeDestroy() {
window.removeEventListener('resize', this.handleResize)
},
methods: {
handleResize() {
this.windowWidth = window.innerWidth
this.windowHeight = window.innerHeight
}
}
}
在上面的代码中,mounted 钩子函数中添加了 resize 事件监听器,并在beforeDestroy 钩子函数中移除监听器。handleResize 方法会在页面大小变化时被调用,更新 Vue 实例中的 windowWidth 和 windowHeight 数据。
相关推荐


















