Comment surveiller window.resize dans VueJs et comment l'implémenter spécifiquement ?

Cet article présente principalement l'exemple de la méthode window.resize de surveillance de VueJ. Maintenant, je le partage avec vous et le donne comme référence.

Vuejs lui-même est un framework MVVM.

Mais lorsqu'on écoute les événements à la fenêtre, on semble souvent impuissant.

Par exemple, cette fois c'est window.resize

Eh bien, j'ai aussi cherché Baidu avant de le faire. Je vois que tout le monde s'inquiète de ce problème.

Question : J'ai également rencontré un tel problème aujourd'hui, à propos de l'adaptation du canevas. Changez la largeur du canevas en fonction du changement de fenêtre

Remarque : Les problèmes importants doivent être mentionnés trois fois pour résoudre les bugs du framework Parlons d'abord de la version du framework (Vue 2.x, ES6 utilisé. ici)

Solution :

Première étape : Définissez d'abord une largeur d'enregistrement comme attribut dans data

data: {
 screenWidth: document.body.clientWidth // 这里是给到了一个默认值 （这个很重要）
}

Deuxième étape : Nous devons suspendre l'événement reisze lorsque vue monté Télécharger sa méthode

  mounted () {
   const that = this
   window.onresize = () => {
    return (() => {
     window.screenWidth = document.body.clientWidth
     that.screenWidth = window.screenWidth
    })()
   }
  }

La troisième étape : surveiller pour surveiller l'évolution de cette valeur d'attribut, si elle change, passer cette val à this.screenWidth

  watch: {
   screenWidth (val) {
    this.screenWidth = val
   }
  }

La quatrième étape Étape : Optimisez le problème du blocage de la page en raison du déclenchement fréquent de la fonction de redimensionnement

  watch: {
   screenWidth (val) {
    if (!this.timer) {
     this.screenWidth = val
     this.timer = true
     let that = this
     setTimeout(function () {
      // that.screenWidth = that.$store.state.canvasWidth
      console.log(that.screenWidth)
      that.init()
      that.timer = false
     }, 400)
    }
   }
  }

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Comment implémenter l'effet d'animation Taobao réactif à la souris dans jQuery

Comment utiliser jQuery pour implémenter l'effet d'animation Taobao réactif à la souris dégradé de transparence Effet d'animation

Comment juger NaN en JavaScript

Comment implémenter la fonction de paiement par numérisation de code WeChat dans l'environnement nodejs ?

Utiliser Vue pour implémenter les principes sous-jacents (tutoriel détaillé)

Comment contrôler le glisser-déposer de fichiers et obtenir la fonction de déplacement de contenu dans js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!