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
mysql 8.0.18 mgr-Installation und seine Umschaltfunktion
1. Systeminstallationspaket yum -y install make g...
Grafisches Tutorial zur Installation der dekomprimierten Version von mysql5.7.14
MySQL ist in Community Edition (Community Server)...
Rundungsvorgang des Datums-/Uhrzeitfelds in MySQL
Inhaltsverzeichnis Vorwort 1. Hintergrund 2. Simu...
Eine detaillierte Zusammenfassung der Regeln zur Verschachtelung von HTML-Tags, geeignet für Anfänger
Ich habe vor kurzem HTML neu gelernt, was als neue...
Die letzten zwei Jahre mit User Experience
<br />Es ist nicht länger als zwei Jahre her...
Die Verwendung der Vue-Direktive v-bind und zu beachtende Punkte
Inhaltsverzeichnis 1. v-bind: kann einige Daten a...
Eine kurze Diskussion über Shallow Copy und Deep Copy in JavaScript
Inhaltsverzeichnis 1. Direkte Zuordnung 2. Oberfl...
So erstellen Sie eine LNMP-Umgebung unter Ubuntu 20.04
Einfache Beschreibung Da es zuvor mit Centos7 ers...
Installations-Tutorial zur dekomprimierten Version von MySQL5.7.21 unter Win10
Installieren Sie die entpackte Version von Mysql ...
Beispielcode zum gleichmäßigen Verteilen von Elementen mithilfe des CSS3-Flex-Layouts
In diesem Artikel wird hauptsächlich erläutert, w...
Implementierungsschritte für die Docker-Bereitstellung von Springboot- und Vue-Projekten
Inhaltsverzeichnis A. Docker-Bereitstellung des S...
Analyse des Quellcodes des React-Ereignismechanismus
Inhaltsverzeichnis Prinzip Quellcodeanalyse Deleg...
Detaillierte Erklärung der Verwendung des Positionsattributs in HTML (vier Typen)
Die vier Eigenschaftswerte von Position sind: 1.V...
Sequentielles und zufälliges Schreiben auf Linux-Festplatten
1. Einleitung ● Zufälliges Schreiben führt dazu, ...
Reines CSS zum Implementieren der Funktion zum Öffnen und Schließen von Auswahlfeldern im iOS-Stil
1 Wirkung Demo-Adresse: https://www.albertyy.com/...