Entwickeln Sie eine Vue-Komponente, die Iframe kapselt

Entwickeln Sie eine Vue-Komponente, die Iframe kapselt

Ich denke, der grundlegende Baustein von VUE sollte eine Komponente sein. Um ein Front-End-Projekt mit VUE zu entwickeln, müssen Sie die Komponenten einzeln entwickeln und das Projekt dann wie Bausteine ​​aufbauen. Komponenten sind in Seiten oder in größeren Komponenten enthalten. Dabei scheint die Grenze zwischen Komponenten und Seiten nicht offensichtlich zu sein. Bei einer Single-Page-Anwendung gibt es tatsächlich nur eine Seite.

Die Vorteile von Komponenten liegen darin, dass sie erstens die Wiederverwendung verbessern können, zweitens bestimmte Funktionen kapseln können, um den Aufruf zu vereinfachen, und drittens aufgrund klarer Verantwortlichkeiten, hoher Komponentenkohäsion und geringer Kopplung zwischen Komponenten die Optimierung, Erweiterung und Wartung von Systemfunktionen fördern. Es gibt viele Vorteile.

Entwicklungskomponenten bestehen hauptsächlich aus zwei Teilen:
1. Interne Logik der Komponente
2. Externe Schnittstelle Da die Komponente, die ich diese beiden Tage erstellt habe, ein <iframe> enthält, gibt es einen weiteren Teil des Arbeitsinhalts:
3. Iframe-Schnittstelle

1. Komponenteneinführung

Dies ist ein Karten-Plugin. Seine Funktion besteht darin, Karten anzuzeigen, externe Befehle anzunehmen, Ebenen zu laden, Grafiken zu zeichnen und andere damit verbundene Vorgänge auszuführen. Die Karte wird mit ArcGIS für JS implementiert. Aufgrund der Projekte, die wir in der Vergangenheit entwickelt haben, verfügen wir über einige Erfahrung im Kartenbetrieb, es gibt jedoch keine Trennung zwischen Front-End und Back-End und wir verwenden weder VUE noch REACT, sondern nur herkömmliche Webseiten. Aufgrund des engen Zeitplans und des Wunsches, vorherige Arbeiten wiederzuverwenden, erwog ich, <iframe> zum Hosten der Kartenseite zu verwenden, sie in einer VUE-Komponente einzukapseln und die Komponente mit externen Befehlen zu verbinden und mit der Kartenseite im Iframe zu interagieren.

2. Interne Struktur und Logik der Komponenten

1. Code-Organisationsstruktur

2. Kartenkomponente

Karte.vue

<Vorlage>
 <div Klasse="Kartencontainer">
 	<!-- Hosting-Kartenseite -->
  <iframe :src="src" ref="iframe" @load="iframeLoad"></iframe>
 </div>
</Vorlage>

<!-- Fügen Sie das Attribut „scoped“ hinzu, um CSS nur auf diese Komponente zu beschränken -->
<Stil scoped="Bereich">
 .map-container iframe{
  Breite: 100 %;
  Höhe: 100%;
  Rand: keiner;  
 }
</Stil>

<Skript>
 importiere Konfiguration aus '../../vue.config' // enthält Pfadinformationen let iframeWin = null; // private Variablen exportiere Standard {
  props:['size'], //Reiner Test, nutzlos, entspricht <Map id="map" ref="map" size="100"></Map>
  Daten() {
   zurückkehren {
    src: '', //Adresse der Kartenseite isLoaded: false, //Ist die Kartenseite geladen? iMap: null, //Von der Kartenseite für externen Zugriff bereitgestelltes Objekt require: null //ArcGIS require-Funktion, die zum Verweisen auf benutzerdefinierte Plug-Ins verwendet wird. Wir haben in der Vergangenheit ziemlich viele benutzerdefinierte Karten-Plugins geschrieben}
  },
  erstellt() {
   this.src = config.publicPath + 'map.html'
  },
  montiert() {
  	//Auf Iframe-Nachrichten warten window.addEventListener('message', this.handleMessage)
   iframeWin = this.$refs.iframe.contentWindow
  },
  Methoden: {
   iframeLoad() {
    dies.isLoaded = wahr;
    window.console.log("Karte ist bereit")
   },   
   async handleMessage() {//Nachrichten vom Iframe empfangen this.require = iframeWin.require;
    dies.iMap = iframeWin.iMap;
   },
   loadLayer(Knoten,Server){
    this.iMap.layerHandler.load(Knoten,Server);
   },
   istBereit(){
    gib dies zurück.isLoaded;
   }
  }
 }
</Skript>

Der Aufbau der Komponenten, wie

Standard exportieren {
 props:, // Attribute im Tag data() { // öffentliche Variablen },
 erstellt() {//Beim Laden?
 },
 mounted() {//Wenn der Ladevorgang abgeschlossen ist},
 Methoden: {//öffentliche Methoden}
}

Exportieren bedeutet, dass dies für die externe Verwendung bestimmt ist. Daher kann auf die darin enthaltenen Eigenschaften, Variablen und Methoden extern zugegriffen werden. Wenn Sie möchten, dass es privat ist, sollten Sie es außerhalb des Exports definieren. Wie in diesem Beispiel:

Eine derart einfache Einführung findet man im Internet nicht. Die chinesische Site von Vue ist veraltet und weist fragmentierte Inhalte auf, was für Anfänger äußerst unfreundlich ist und den Lernaufwand erhöht.

3. Iframe-Schnittstelle

Wie kommuniziert die Komponente Map.vue mit dem darin enthaltenen Iframe?
Durch Systemmeldungen und direkten Zugriff auf das Iframe-Objekt. Voraussetzung für den direkten Zugriff auf Objekte in einem Iframe ist, dass dieser nicht domänenübergreifend sein kann.

Die Kartenseite map.html wird vom iframe gehostet

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <Kopf>
		...
 </Kopf>
 <Text>
  <div id="Karte"></div>
		...
  </div>  

 </body>
</html>
<script src="http://192.168.0.200/pubzy211/arcgis_js_api/3.19/init.js"></script>
<Skripttyp="text/javascript">
 var iMap = {}; //Externe Referenzschnittstelle require([
  "esri/config",
  "esri/karte",
  "esri/geometry/Extent",
  "esri/SpatialReference",

  "layerlib/LtLayer",

  "Dojo/Dom",
  "dojo/_base/array",
  "dojo/parser",
  „dojo/domBereit!“
 ], Funktion(
  esriConfig,
  Karte,
  Ausmaß,
  Raumbezug,

  LtSchicht,
  dom,
  ArrayUtils,
  Parser
 ) {
  //Karte
  var map = ...

  /* Externe Schnittstelle */
  iMap = {
   Karte: Karte,
   Legende: Legende,
   Zuhause: Zuhause,
   tipDialog: tipDialog,
   umschalten: umschalten,
   Übersichtskarte: Übersichtskarte
  };
  iMap.drawHandler = ...
  iMap.layerHandler = ...;
  iMap.centerAt = ...;
  iMap.clear = ...;
  iMap.restoreView = ...;

  //Sende ein Signal zum Abschluss des Ladevorgangs an die übergeordnete Vue-Seite window.parent.postMessage({
   cmd: "mapIsReady",
   Parameter: {
    Erfolg: wahr,
    Daten: wahr
   }
  }, '*');
  /* Ende der externen Schnittstelle*/

 });
</Skript>

Die Kartenkomponente Map.vue entspricht dem Iframe-Teil, siehe den Code in 1.2 für Details

Standard exportieren {
		. . .
  montiert() {
	  //Auf Iframe-Nachrichten warten window.addEventListener('message', this.handleMessage)
   //Holen Sie sich das Fensterobjekt des Iframes iframeWin = this.$refs.iframe.contentWindow
  },
  Methoden: {
   iframeLoad() {
    dies.isLoaded = wahr;
    window.console.log("Karte ist bereit")
   },   
   async handleMessage() {//Nachrichten vom Iframe empfangen this.require = iframeWin.require;
    dies.iMap = iframeWin.iMap;
   },
   loadLayer(Knoten,Server){
   	//Ebene laden this.iMap.layerHandler.load(nodes,servers);
   }
  }
 }

4. Externe Schnittstelle

Map.vue ist eine Komponente, die mit der Komponente oder Seite kommunizieren muss, in der sie sich befindet.

Jetzt wird Map.vue in einer Containerseite Home.vue (also einer Testseite) platziert, die auch eine Befehlskomponente Layer.vue enthält. Klicken Sie auf die Schaltfläche in der Befehlskomponente und die Karte reagiert entsprechend. Das Prinzip ist wie folgt:

Wenn auf die Schaltfläche der Befehlskomponente geklickt wird, werden Informationen an die Containerseite gesendet und anschließend ruft die Containerseite die Methode der Kartenkomponente auf.

Testseite Home.vue

<Vorlage>
 <div id="app1">
  <div id="Kartencontainer">
   <div>Kartenkomponente</div>
   <Karte id="Karte" ref="Karte" size="100"></Karte>
  </div>
  <div id="Schicht-Container">
   <div>Andere Komponenten</div>
   <Ebene @loadLayer="loadLayer" @loadCloud="loadCloud" @clear="clearMap"></Ebene>
  </div>
 </div>
</Vorlage>

<Skript>
 Map aus „../components/Map.vue“ importieren
 Importiere Layer aus '../components/Layer.vue'

 Standard exportieren {
  Name: "App",
  Komponenten:
   Karte,
   Schicht
  },
  Methoden:{
   loadLayer(Knoten,Server){//Ebene laden let map = this.$refs.map;
    map.loadLayer(Knoten,Server);
   },
   loadCloud(data){//Satelliten-Wolkenkarte laden let map = this.$refs.map;
    map.require(["drawlib/Cloud"], Funktion (Cloud) {
     sei iMap = map.iMap;
     sei cloudId = "Cloud";
     lass cloud = neue Cloud(iMap.map);
     iMap.drawHandler.push(cloudId, cloud);
     cloud.draw(Daten, Cloud-ID);
    });
   },
   clearMap(){//Löschen let map = this.$refs.map;
    map.iMap.clear();
   }
  }
 }
</Skript>

<Stil>
. . .
</Stil>

Befehlskomponente Layer.vue

<Vorlage>
 <div Klasse="Schicht-Container">
  <button @click="loadLayer">Ebene laden</button>
  <button @click="loadCloud">Satelliten-Wolkenbild</button>
  <button @click="clear">Löschen</button>
 </div>
</Vorlage>

<Skript>
 Standard exportieren {
  Methoden: {
   LadeLayer() {
    lass Knoten = ...
    Server lassen = ...
    dies.$emit("loadLayer", Knoten, Server)
   },
   ladenCloud(){
    lass Daten = ...;
    dies.$emit("loadCloud", Daten);
   },
   klar(){
    dies.$emit("klar");
   }
  },
 }
</Skript>

<Stil scoped="Bereich">
. . .
</Stil>

Beachten Sie, dass die in der gesendeten Nachricht der Befehlskomponente angegebene Methode entsprechende Eigenschaften auf der Containerseite hat:

Befehlskomponente loadCloud(){
 lass Daten = ...;
 dies.$emit("loadCloud", Daten);
},

Containerseite <Layer @loadLayer="loadLayer" @loadCloud="loadCloud" @clear="clearMap"></Layer>

5. Ergebnisse der Operation

VI. Fazit

Andere Komponenten müssen über die Containerseite mit der Kartenkomponente interagieren. Andere Komponenten interagieren nicht direkt mit der Kartenkomponente. Dies ist eigentlich ein Befehlsmodus. Der Vorteil liegt darin, dass andere Komponenten und Kartenkomponenten entkoppelt und nicht miteinander gekoppelt sind, sich also nicht gegenseitig beeinflussen. Dies dient der Erweiterung und Optimierung der Kartenkomponente selbst. Zu den Nachteilen gehört, dass alles über die Containerseite weitergeleitet werden muss, der Code der Containerseite möglicherweise redundant ist und manche Methoden lediglich als Sprachrohr dienen, sodass man das Gefühl hat, sie seien repetitiv und bedeutungslos.

Oben sind die Details zur Entwicklung einer Vue-Komponente beschrieben, die Iframes kapselt. Weitere Informationen zu Vue-Komponenten, die Iframes kapseln, finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

Das könnte Sie auch interessieren:
  • Beispielcode zur Verwendung von Iframe-Elementen in Vue-Komponenten
  • Vue verwendet Iframe, um auf HTML-Seiten zu verweisen und den Aufrufvorgang von Vue- und HTML-Seitenmethoden zu implementieren.
  • Implementieren verschachtelter Seiten (iframe) in Vue
  • Lösen Sie das Problem des Einfrierens beim Ziehen und Ändern der Größe des Div im Iframe in Vue
  • Implementierung der Informationsinteraktion zwischen Vue und iframe
  • So halten Sie Iframes in Vue ohne Aktualisierung am Leben
  • Vue-Beispielcode mit Iframe zum Einbetten einer Webseite
  • Beispiel für die Integration einer Iframe-Seite in Vue

<<:  So melden Sie sich unter Shell schnell ohne Kennwort bei der MySQL-Datenbank an

>>:  Linux CentOS6.5 yum installiere mysql5.6

Artikel empfehlen

Verwendung des Linux-Befehls tr

1. Einleitung tr wird verwendet, um einen Textabs...

Detaillierte Erklärung des MySQL-Datenbank-LIKE-Operators in Python

Der LIKE-Operator wird in der WHERE-Klausel verwe...

Verwendung und Unterschiedsanalyse von „Ersetzen in“ und „Einfügen in“ beim Update doppelter Schlüssel in MySQL

Dieser Artikel veranschaulicht anhand von Beispie...

Detaillierte Erläuterung der DOM-Stileinstellungen in vier Reaktionskomponenten

1. Inline-Stile Um Inline-Stile zum virtuellen DO...

Alibaba Cloud Server Linux-System erstellt Tomcat zur Bereitstellung von Webprojekten

Ich teile den gesamten Prozess in vier Schritte e...

Detaillierte Erklärung zur Verwendung von Join in Mysql

In den vorherigen Kapiteln haben wir gelernt, wie...

So verwenden Sie einen SSH-Tunnel, um eine Verbindung zum MySQL-Server herzustellen

Vorwort In einigen Fällen kennen wir nur die Intr...

Detaillierte Erläuterung der CSS-Bildspleißtechnologie (Sprite-Bild)

CSS-Bildspleißtechnologie 1. Bildzusammenfügung B...

So konfigurieren Sie Tomcat und führen Ihr erstes Java-Webprojekt auf IntelliJ IDEA 2018 aus

1 Tomcat herunterladen und starten Gehen Sie auf ...

CSS erzielt den Effekt, die Bildlaufleiste auszublenden und den Inhalt zu scrollen (drei Möglichkeiten)

Wir begegnen dieser Situation häufig bei der Fron...

Lösung zum Vergessen des MySQL-Passworts unter Linux

Das Problem ist folgendes: Ich habe den Befehl my...

Studiennotizen zur MySQL Master-Slave-Konfiguration

● Ich hatte vor, einige Cloud-Daten zu kaufen, um...

So verbinden Sie eine virtuelle Linux-Maschine mit WLAN

Im Leben ist das Internet allgegenwärtig. Wir kön...

Detaillierte Erklärung zur Verwendung von pt-heartbeat zur Überwachung der MySQL-Replikationsverzögerung

pt-Herzschlag Wenn die Datenbank zwischen Master ...

jQuery-Plugin zur Implementierung des Suchverlaufs

Jeden Tag ein jQuery-Plugin – um einen Suchverlau...