So lösen Sie das Problem der Änderungsereignisse im VUE-Abhörfenster

Im Folgenden werde ich eine kurze Diskussion über das Thema der VUE-Überwachung von Fensteränderungsereignissen führen. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich sein wird.

Vuejs selbst ist ein MVVM-Framework. Bei der Überwachung von Ereignissen am Fenster scheint dies jedoch häufig unzureichend zu sein.

Diesmal war es zum Beispiel window.resize. Ich habe es auch auf Baidu überprüft, bevor ich es gemacht habe. Ich sehe, dass sich jeder über dieses Problem Sorgen macht.

Frage: Ich bin heute auch auf ein solches Problem gestoßen, bei der Leinwandanpassung. Ä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 (hier verwendet Vue 2.x, ES6).

Lösung:

Schritt 1: Zuerst eine Datensatzbreite in Daten als Attribut definieren

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

Schritt 2: Wir müssen über die Methode zum Mounten des Reisze-Ereignisses sprechen, wenn Vue gemountet wird

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

Der dritte Schritt: Beobachten Sie, um die Änderung dieses Attributwerts zu überwachen. Wenn es sich ändert, übergeben Sie diesen Wert an this.screenWidth Was ich für alle zusammengestellt habe, ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Vue implementiert Tab-Wechsel plus Stilwechselmethode

"==" und "===" in JavaScript Detaillierte Erklärung des Unterschieds

node.js Blog-Projektentwicklungshinweise

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem der Änderungsereignisse im VUE-Abhörfenster. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!