Detaillierte Erklärung zur Verwendung der vue3 Teleport-Sofortbewegungsfunktion
|
Die Verwendung der vue3 Teleport-Sofortbewegungsfunktion dient zu Ihrer Information. Der spezifische Inhalt ist wie folgt Teleport wird normalerweise als sofortige Teleportationskomponente übersetzt, was eigentlich schwer zu verstehen ist. Ich verstehe es als „unabhängige Komponente“ Es kann die von Ihnen geschriebenen Komponenten in jedem gewünschten DOM mounten und ist daher sehr frei und unabhängig. Nehmen wir ein Beispiel: Schreiben einer Popup-Komponente
<Vorlage>
<teleportieren nach="#modal">
<div id="center" v-if="istOffen">
<h2><slot>Dies ist ein Modal</slot></h2>
<button @click="buttonClick">Schließen</button>
</div>
</teleportieren>
</Vorlage>
<script lang="ts">
Standard exportieren {
Requisiten: {
isOpen: Boolesch,
},
gibt aus:
'modal schließen': null
},
setup(Eigenschaften, Kontext) {
const buttonClick = () => {
Kontext.emit('modal schließen')
}
zurückkehren {
buttonKlick
}
}
}
</Skript>
<Stil>
#Mitte {
Breite: 200px;
Höhe: 200px;
Rand: 2px tief schwarz;
Hintergrund: weiß;
Position: fest;
links: 50%;
oben: 50 %;
Rand links: -100px;
Rand oben: -100px;
}
</Stil>Bei Verwendung in app.vue ist es dasselbe wie der Aufruf einer normalen Komponente.
<Vorlage>
<div id="app">
<img alt="Vue-Logo" src="./assets/logo.png">
<HelloWorld msg="Willkommen bei Ihrer Vue.js-App"/>
<HooksDemo></HooksDemo>
<button @click="openModal">Modal öffnen</button><br/>
<modal :isOpen="modalIsOpen" @close-modal="onModalClose"> Mein Modal !!!!</modal>
</div>
</Vorlage>
<Skript>
importiere HelloWorld aus './components/HelloWorld.vue'
importiere HooksDemo aus './components/HooksDemo.vue'
Modal aus „./components/Modal.vue“ importieren
importiere{ref} von 'vue'
Standard exportieren {
Name: "App",
Komponenten:
Hallo Welt,
HakenDemo,
Modal
},
aufstellen() {
const modalIsOpen = ref(false)
const openModal = () => {
modalIsOpen.value = true
}
const onModalClose = () => {
modalIsOpen.value = false
}
zurückkehren {
modalIsOpen,
offenModal,
beiModalClose
}
}
}
</Skript>
<Stil>
#app {
Schriftfamilie: Avenir, Helvetica, Arial, serifenlos;
-webkit-font-smoothing: Kantenglättung;
-moz-osx-font-smoothing: Graustufen;
Textausrichtung: zentriert;
Farbe: #2c3e50;
Rand oben: 60px;
}
</Stil>Bei Verwendung in der Datei app.vue befindet sich das Modal unter dem DOM-Knoten der App, und die DOM-Struktur und das CSS des übergeordneten Knotens wirken sich auf das Modal aus und verursachen somit Probleme 1. Modal ist in andere Komponenten eingebunden und kann leicht gestört werden Teleport kann modale Komponenten in jedem externen DOM rendern, das Sie rendern möchten, ohne sie in #app verschachteln zu müssen, sodass sie sich nicht gegenseitig stören. Sie können sich Teleport als Portal vorstellen, mit dem Sie Ihre Komponenten an jeden beliebigen Ort übertragen können. Wenn Sie es verwenden, kann das to- Attribut den DOM-Knoten bestimmen, unter dem Sie es mounten möchten. <Vorlage> <teleportieren nach="#modal"> <div id="Mitte"> <h2>besser</h2> </div> </teleportieren> </Vorlage> Fügen Sie in index.html unter dem öffentlichen Ordner einen Knoten hinzu <!DOCTYPE html> <html lang="de"> <Kopf> <meta charset="utf-8"> <meta http-equiv="X-UA-kompatibel" content="IE=edge"> <meta name="viewport" content="width=Gerätebreite,Anfangsmaßstab=1.0"> <link rel="Symbol" href="<%= BASE_URL %>favicon.ico" > <Titel><%= htmlWebpackPlugin.options.title %></Titel> </Kopf> <Text> <keinSkript> <strong>Es tut uns leid, aber <%= htmlWebpackPlugin.options.title %> funktioniert nicht richtig, wenn JavaScript nicht aktiviert ist. Bitte aktivieren Sie es, um fortzufahren.</strong> </noscript> <div id="app"></div> <div id="modal"></div> <!-- erstellte Dateien werden automatisch eingefügt --> </body> </html> Auf diese Weise können Sie erkennen, dass die modale Komponente nicht unter der App gemountet ist und nicht mehr von der App-Komponente beeinflusst wird.
Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: So installieren und verwenden Sie Server-U Version 14
>>: mysql 5.7.18 winx64 Passwort ändern
Artikel empfehlen
Detaillierte Erläuterung des verschachtelten Routings im Vue-Router
Inhaltsverzeichnis Schritt 1. Konfigurieren Sie R...
Probleme bei der Installation von TensorRT im Docker-Container
Deinstallieren Sie die installierte Version auf U...
Website User Experience Design (UE)
Ich habe gerade einen von JunChen verfassten Beitr...
Die Lösung für das Problem, dass die Webtabelle oder die Div-Ebene in der Webseite gestreckt ist
<br />Beim Gestalten von Webseiten stoßen wi...
Detaillierte Erklärung der React-Komponentenkommunikation
Inhaltsverzeichnis Einführung in die Komponentenk...
Lösung zum Anwenden von CSS3-Transformationen auf Hintergrundbilder
CSS-Transformationen sind zwar cool, wurden aber ...
Gängige Methoden und Probleme der Docker-Bereinigung
Wenn Sie Docker für die Entwicklung im großen Maß...
Wie man hochwertige Webseiten gestaltet Erfahrung in der Gestaltung hochwertiger Webseiten (Bilder und Text)
Mit der zunehmenden Anzahl offener Plattformen ver...
So verwalten Sie MySQL-Indizes und Datentabellen
Inhaltsverzeichnis Tabellenkonflikte finden und b...
Detaillierte Erläuterung der benutzerdefinierten Konfiguration des offiziellen Docker-MySQL-Image
Um Installationszeit zu sparen, habe ich zum Star...
CSS3 realisiert das Papierflugzeug aus der Kindheit
Heute werden wir Origami-Flugzeuge basteln (die A...
Detaillierte Erklärung der neuen Funktionen von ES9: Asynchrone Iteration
Inhaltsverzeichnis Asynchrones Durchlaufen Asynch...
Zusammenfassung der Wissenspunkte im Zusammenhang mit Null (IFNULL, COALESCE und NULLIF) in MySQL
Dieser Artikel erläutert anhand von Beispielen di...
So setzen Sie das MySQL-Root-Passwort unter Windows zurück
Heute habe ich festgestellt, dass WordPress keine...
HTML5 und jQuery zum Implementieren von Vorschau-Codebeispielen vor dem Hochladen lokaler Bilder
HTML5 und jQuery implementieren die Vorschau loka...