Vue monitora mudanças na janela do navegador

1. Inicializar variáveis

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

2. Adicionar método

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

3. Adicionar monitoramento

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

4. Destrua os ouvintes

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