Vue监听浏览器窗口的变化

原创已于 2023-07-26 14:46:19 修改 · 4.7k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2023-07-26 14:44:48 首次发布

该文描述了一个Vue组件中如何初始化并动态响应窗口大小的变化。通过在data中定义screenWidth和screenHeight，然后创建handleResize方法更新这两个值，再结合Vue的生命周期钩子函数mounted和beforeDestroy来添加和移除窗口的resize事件监听，确保在窗口尺寸改变时更新组件状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 初始化变量

data() {
  return {
    // 屏幕宽度
    screenWidth: window.innerWidth,
    // 屏幕高度
    screenHeight: window.innerHeight,
  }
}

2. 添加方法

handleResize() {
  this.screenWidth = window.innerWidth;
  this.screenHeight = window.innerHeight;
},

3. 添加监听

mounted() {
  // 监听屏幕宽度和高度变化
  window.addEventListener('resize', this.handleResize, true)
},

4. 摧毁监听

// 销毁监听
beforeDestroy() {
  window.removeEventListener('resize', this.handleResize);
},