Vue监听浏览器窗口的变化

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);
},