Wie überwacht man window.resize in VueJs und wie implementiert man es konkret?

In diesem Artikel wird hauptsächlich das Beispiel der Überwachungsmethode window.resize von VueJ vorgestellt. Jetzt teile ich es mit Ihnen und gebe es als Referenz.

Vuejs selbst ist ein MVVM-Framework.

Aber bei der Überwachung von Ereignissen am Fenster wirkt es oft machtlos.

Diesmal ist es zum Beispiel window.resize

Nun, ich habe auch Baidu durchsucht, bevor ich es getan habe. Ich sehe, dass sich jeder über dieses Problem Sorgen macht.

Frage: Ich bin heute auch auf ein solches Problem bezüglich der Leinwandanpassung gestoßen. Ändern Sie die Breite der Leinwand entsprechend der Änderung des Fensters

Hinweis: Wichtige Probleme sollten dreimal erwähnt werden, um Fehler im Framework zu beheben (verwendet Vue 2.x, ES6). hier)

Lösung:

Erster Schritt: Definieren Sie zunächst eine Datensatzbreite als Attribut in den Daten

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

Zweiter Schritt: Wir müssen das Reisze-Ereignis mounten, wenn Vue es gemountet hat Methode

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

Schritt 3: Beobachten Sie, um Änderungen in diesem Eigenschaftswert zu überwachen. Wenn er sich ändert, übergeben Sie diesen Wert an this.screenWidth

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

Schritt 4: Optimieren Sie, da die Größenänderungsfunktion häufig ausgelöst wird Die Seite bleibt hängen

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

Das oben Gesagte habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

So implementieren Sie den auf die Maus reagierenden Taobao-Animationseffekt in jQuery

So implementieren Sie mit jQuery den auf die Maus reagierenden Effekt Transparenzgradient Animationseffekt

So ermitteln Sie NaN in JavaScript

Wie implementiert man die WeChat-Code-Scanning-Zahlungsfunktion in der NodeJS-Umgebung?

Verwenden von Vue zum Implementieren der zugrunde liegenden Prinzipien (ausführliches Tutorial)

So steuern Sie das Ziehen von Dateien und erhalten die Funktion zum Ziehen von Inhalten in js

Das obige ist der detaillierte Inhalt vonWie überwacht man window.resize in VueJs und wie implementiert man es konkret?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!