Wie kann ich sich ändernde Fenstergrößen in Vue überwachen?

In meiner mobilen Web-App mit Vue möchte ich meine Fußzeile ausblenden, wenn die Soft-Tastatur erscheint. Ich habe also eine kleine Funktion, um das Verhältnis von Fensterhöhe zu Fensterbreite zu testen …

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

…und ich deklariere window.innerHeight/window.innerWidth in meinen Daten.

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

Das Problem ist, dass meine h-Eigenschaft nicht den neuen Wert erhält, wenn sich window.innerHeight ändert. Wie kann ich window.innerHeight beobachten?

Um die aktuelle Fensterhöhe Ihres Browsers bei Änderungen zu ermitteln, verwenden Sie dieses Skript:

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

Um die Informationen anzuzeigen, verwenden Sie:

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

VUE 2.7 und höher

In Vue 2.7+ können Sie ein Composable erstellen, das eine reaktive Breite und einen Haltepunktnamen zurückgibt.

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'
    else return 'lg' // Fires when windowWidth.value >= 1200
  })

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

  return { width, type }
}

Sie können es in der Einrichtungsmethode Ihrer Komponenten verwenden.

const { width, type } = useBreakpoints()

Kurzer Tipp: Aus Leistungsgründen sollte dies am besten nur einmal in einer App verwendet werden.

• Erstellen Sie ein kleines Plugin und fügen Sie den Wert zur Vue-Instanz hinzu, genau wie Vuetify.

• Oder verwenden Sie „provide and inject“.

• Oder binden Sie sie in Ihre globale State-Management-Lösung ein.

Die obige Antwort hat bei mir nicht funktioniert. Stattdessen habe ich Folgendes verwendet:

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

Wer Vuetify bereits nutzt, kann einfach zuschauen this.$vuetify.breakpoint.width oder this.$vuetify.breakpoint.height für Änderungen in den Abmessungen des Ansichtsfensters.

Vuetify-Breakpoint-Dokumente

Das ist wahrscheinlich wirklich zu spät, aber wenn Sie einen viel einfacheren Ansatz wünschen, können Sie die NPM-Installation durchführen https://www.npmjs.com/package/vue-window-size
Und import windowWidth from 'vue-window-size';

Oder dies mit der Kompositions-API

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

Meine Antwort kommt vielleicht zu spät, aber keines der oben genannten Dinge hat bei mir funktioniert. Hier ist also, was ich zu diesem Thema gefunden habe! 🙂 🙂

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