web-dev-qa-db-fra.com

Vue JS - Comment obtenir la taille de la fenêtre à chaque changement

Je ne connais pas encore vuejs, mais j’essayais d’obtenir la taille de la fenêtre chaque fois que je La redimensionnais afin que je puisse la comparer à une valeur d’une fonction que je Dois appliquer en fonction de l’écran. Taille. J'ai également essayé d'utiliser la propriété de montre Mais je ne savais pas comment la gérer, c'est probablement pourquoi cela n'a pas fonctionné 

  methods: {

    elem() {
     this.size = window.innerWidth;
     return this.size;
   },
  mounted() {
    if (this.elem < 767){ //some code }
   }
javascripthtmlvue.js
4
sara

Placez ce code dans votre composant Vue:

created() {
  document.addEventListener("resize", this.myEventHandler);
},
destroyed() {
  document.removeEventListener("resize", this.myEventHandler);
},
methods: {
  myEventHandler(e) {
    // your code for handling resize...
  }
}

Ceci enregistrera la méthode vue sur event, vous donnera l'objet complet Vue à côté de l'objet event et le supprimera sur le composant destroy (mémoire libre).

6
Goran

Vous pouvez l'utiliser n'importe où n'importe quand

methods: {
    //define below method first.
    winWidth: function () {
        setInterval(() => {
            var w = window.innerWidth;
            if (w < 768) {
                this.clientsTestimonialsPages = 1
            } else if (w < 960) {
                this.clientsTestimonialsPages = 2
            } else if (w < 1200) {
                this.clientsTestimonialsPages = 3
            } else {
                this.clientsTestimonialsPages = 4
            }
        }, 100);
    }
},
mounted() {
    //callback once mounted
    this.winWidth()
}
1
Gayan Sandamal