¿Cómo puedo controlar el cambio de tamaño de ventana en Vue?

En mi aplicación web móvil con Vue, quiero ocultar mi pie de página cuando aparece el teclado virtual. Así que tengo una pequeña función para probar la relación entre la altura de la ventana y el ancho de la ventana…

showFooter(){
    return h / w > 1.2 || h > 560;
}

…y declaro window.innerHeight/window.innerWidth en mis datos.

    data: { h: window.innerHeight, w: window.innerWidth }

El problema es que cuando cambia window.innerHeight, mi propiedad h no obtiene el nuevo valor. ¿Cómo puedo ver window.innerHeight?

Para obtener la altura actual de la ventana de su navegador a medida que cambia, use este script:

new Vue({
  el: '#app',
  data() {
    return {
      windowHeight: window.innerHeight
    }
  },

  mounted() {
    this.$nextTick(() => {
      window.addEventListener('resize', this.onResize);
    })
  },

  beforeDestroy() { 
    window.removeEventListener('resize', this.onResize); 
  },

  methods: {  
    onResize() {
      this.windowHeight = window.innerHeight
    }
  }
});

Cómo mostrar la información:

<div id="app">
 Current height: {{ windowHeight }}
</div>

VUE 2.7 y superior

En Vue 2.7+, puede crear un componible que devuelva un ancho reactivo y un nombre de punto de interrupción.

import { computed, onMounted, onUnmounted, ref } from "vue"

export const useBreakpoints = () => {
  let windowWidth = ref(window.innerWidth)

  const onWidthChange = () => windowWidth.value = window.innerWidth
  onMounted(() => window.addEventListener('resize', onWidthChange))
  onUnmounted(() => window.removeEventListener('resize', onWidthChange))
  
  const type = computed(() => {
    if (windowWidth.value < 550) return 'xs'
    if (windowWidth.value >= 550 && windowWidth.value < 1200) return 'md'
    if (windowWidth.value >= 1200) return 'lg'
    return null; // This is an unreachable line, simply to keep eslint happy.
  })

  const width = computed(() => windowWidth.value)

  return { width, type }
}

Puede usarlo en el método de configuración de sus componentes.

const { width, type } = useBreakpoints()

Sugerencia rápida: por motivos de rendimiento, es mejor utilizarlo solo una vez en una aplicación por motivos de rendimiento.

• Cree un pequeño complemento y agregue el valor a la instancia de Vue, tal como lo hace Vuetify.

• O use proporcionar e inyectar.

• O comprométalos con su solución de administración de estado glabal.

La respuesta anterior no funcionó para mí. En cambio, usé:

mounted() {
  window.addEventListener('resize', () => {
    this.windowHeight = window.innerHeight
  })
}

Para aquellos que ya usan Vuetify, solo pueden mirar this.$vuetify.breakpoint.width o this.$vuetify.breakpoint.height para cambios en las dimensiones de la ventana gráfica.

Documentos de punto de interrupción de Vuetify

Probablemente sea demasiado tarde, pero si desea un enfoque mucho más simple, puede realizar la instalación de npm https://www.npmjs.com/package/vue-window-size
y import windowWidth from 'vue-window-size';

O esto con la api de composición

    setup() {
        const windowSize = ref(window.innerWidth)
        onMounted(() => {
            window.addEventListener('resize', () => {windowSize.value = window.innerWidth} )
        })
        onUnmounted(() => {
            window.removeEventListener('resize', () => {windowSize.value = window.innerWidth})
        })
        return { 
            windowSize
        }
    }

Mi respuesta puede llegar tarde, pero ninguno de los anteriores funcionó para mí, ¡así que esto es lo que encontré sobre este tema! 🙂

https://codepen.io/sethdavis512/pen/EvNKWw

html:

<div id="app">
    <section class="section has-text-centered">
        <h1 class="title is-1">
            Your Window
        </h1>
        <h3 class="title is-3">
            Width: {{ window.width }} px<br/>
            Height: {{ window.height }} px
        </h3>
        <p class="has-text-white">
            &uarr;<br/>
            &larr; resize window &rarr;<br/>
            &darr;
        </p>
    </section>
</div>

CSS:

$top-color: yellow;
$bottom-color: tomato;

html, body, #app, section.section {
  height: 100%;
}

body {
    background: -webkit-linear-gradient($top-color, $bottom-color);
    background: -o-linear-gradient($top-color, $bottom-color);
    background: -moz-linear-gradient($top-color, $bottom-color);
    background: linear-gradient($top-color, $bottom-color);
}

section.section {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

.title {
    color: white;
}

JS:

new Vue({
    el: '#app',
    data: {
        window: {
            width: 0,
            height: 0
        }
    },
    created() {
        window.addEventListener('resize', this.handleResize);
        this.handleResize();
    },
    destroyed() {
        window.removeEventListener('resize', this.handleResize);
    },
    methods: {
        handleResize() {
            this.window.width = window.innerWidth;
            this.window.height = window.innerHeight;
        }
    }
});