Maison > interface Web > js tutoriel > le corps du texte

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

亚连
Libérer: 2018-06-11 16:22:40
original
2781 Les gens l'ont consulté

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 // 这里是给到了一个默认值 (这个很重要)
}
Copier après la connexion

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
    })()
   }
  }
Copier après la connexion

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
   }
  }
Copier après la connexion

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)
    }
   }
  }
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal