web-dev-qa-db-fra.com

Comment utiliser la taille de la fenêtre dans Vue? (Comment détecter le clavier logiciel?)

Dans mon application Web mobile avec Vue, je souhaite masquer mon pied de page lorsque le clavier virtuel apparaît. J'ai donc une petite fonction pour tester le rapport hauteur/largeur de la fenêtre ...

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

... et je déclare window.innerHeight/window.innerWidth dans mes données.

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

Le problème, c'est que lorsque window.innerHeight change, ma propriété h ne reçoit pas la nouvelle valeur. Comment puis-je regarder window.innerHeight?

vue.js
12
bbsimonbb

Je suis sûr qu'il existe de meilleures façons de le faire, mais celui-ci fonctionnera pour vous jusqu'à ce que je propose quelque chose:

Fondamentalement, vous aurez besoin d'un seul accessoire de données et d'un observateur pour le faire.

new Vue({
  el: '#app',
  data() {
    return {
      windowHeight: 0,
      txt: ''
    }
  },

  watch: {
    windowHeight(newHeight, oldHeight) {
     this.txt = `it changed to ${newHeight} from ${oldHeight}`;
    }
  },

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

Et cela produirait les modifications exemple jsfiddle

<div id="app">
  <br> Window height: {{ windowHeight }} <br/>
  {{ txt }}
</div>
26
samayo