Detaillierte Anwendungsfälle von Vue3 Teleport

Detaillierte Anwendungsfälle von Vue3 Teleport

Offizielle Website

https://cli.vuejs.org/en/guide/

Manchmal gibt es einen Teil der Vorlage einer Komponente, der logisch zu dieser Komponente gehört, aus technischer Sicht ist es jedoch besser, diesen Teil der Vorlage an eine andere Stelle im DOM außerhalb der Vue-App zu verschieben.

Fall

Bildbeschreibung hier einfügen

Bildbeschreibung hier einfügen

Beide Komponenten befinden sich im übergeordneten Element und sind untergeordnete Elemente der übergeordneten Komponente. Aus technischer Sicht sollten sie jedoch unter dem Körper montiert werden.

Unveränderte Version

<!DOCTYPE html>
<html>
<Kopf>
  <meta charset="utf-8">
  <Titel>Vue3</Titel>
  <script src="./vue.js"></script>
</Kopf>
<Text>
<div id="hallo-vue" class="box">
  <div>Ich bin die übergeordnete Komponente</div>
  <div>Ich bin die übergeordnete Komponente</div>
  <div>Ich bin die übergeordnete Komponente</div>
  <div>Ich bin die übergeordnete Komponente</div>
  <div>Ich bin die übergeordnete Komponente</div>
  <div>Ich bin die übergeordnete Komponente</div>
  <button @click="handleClick">Klicken Sie hier, um Unterkomponenten anzuzeigen</button>
  <cpn ref="compRef" @show-confirm="showConfirm"></cpn>
  <confirm ref="confirmRef" @confirm="handleConfirm" @cancel="handleCancel" text="Möchten Sie wirklich beenden?"</confirm>
</div>
<!--Die Komponente, die nach dem Klicken auf die Schaltfläche angezeigt wird-->
<Vorlagen-ID="mycpn">
  <Übergangsname="Liste-Ausblenden">
    <div Klasse="cpnContainer" v-show="isshow" @click.stop="handleClose()">
      <div Klasse="inner-wrapper" @click.stop>
        Verwenden von Übergängen
        <div Klasse="Text">
          <div>Ich bin innerer Text</div>
          <div>Ich bin innerer Text</div>
          <div>Ich bin innerer Text</div>
          <div>Ich bin innerer Text</div>
          <div>Ich bin innerer Text</div>
        </div>
        <div class="close" @click="handleClose()">schließen</div>
      </div>
    </div>
  </Übergang>

</Vorlage>

<!--Bestätigen, um die Bestätigungskomponente zu schließen-->
<template id="bestätigen">
  <Übergangsname="Bestätigung-Ausblenden">
    <div v-show="isshow" class="bestätigen">
      <div Klasse="Bestätigungs-Wrapper">
        <div Klasse="Inhalt bestätigen">
          <p>{{text}}</p>
          <div Klasse="btnContainer">
            <button style="Hintergrundfarbe: dunkelseegrün;Rand rechts: 40px" @click="bestätigen">{{confirmBtnText}}</button>
            <button @click="abbrechen">{{cancelBtnText}}</button>
          </div>
        </div>
      </div>
    </div>
  </Übergang>
</Vorlage>
<Skript>
  Konstanten cpn = {
    Vorlage: "#mycpn",
    Requisiten: {},
    Daten() {
      zurückkehren {
        // bbb: 145612
        isshow: falsch
      }
    },
    Methoden: {
      zeigen() {
        dies.isshow = true
      },
      verstecken() {
        // console.log("ausblenden")
        this.isshow = falsch
      },
      handleClose() {
        // console.log("ausblenden")
        dies.$emit("anzeigen-bestätigen")
      },

    }
  }

  const bestätigen = {
    Vorlage: "#confirm",
    Requisiten: {
      text: {
        Typ: Zeichenfolge,
        Standard: „fdsafdasfdas“
      },
      bestätigenBtnText: {
        Typ: Zeichenfolge,
        Standard: „OK“
      },
      cancelBtnText: {
        Typ: Zeichenfolge,
        Standard: „Abbrechen“
      }
    },
    Daten() {
      zurückkehren {
        // bbb: 145612
        isshow: falsch
      }
    },
    Methoden: {
      zeigen() {
        dies.isshow = true
      },
      verstecken() {
        this.isshow = falsch
        //Anzeige der Unterkomponenten steuern},
      // Nach dem Klicken auf die Schaltfläche das Ereignis „confirm()“ an die übergeordnete Komponente senden {
        dies.verstecken();
        dies.$emit("bestätigen")
      },
      stornieren() {
        dies.ausblenden()
        dies.$emit('abbrechen')
      }
    }
  }
  const HelloVueApp = Vue.createApp({
    Daten() {
      zurückkehren {
        Nachricht: „Hallo Vue!!“
      }
    },
    Komponenten:
      cpn,
      bestätigen
    },
    Methoden: {
      handleKlick() {
        // Die übergeordnete Komponente ruft die Methode der untergeordneten Komponente auf // this.$refs.compRef.show()
        dies.$refs.compRef.show()
      },
      zeigeBestätigen() {
        Konsole.log("fdsa")
        dies.$refs.confirmRef.show()
      },
      // Klicken Sie auf „Abbrechen“ oder „Bestätigen“, um die folgende Logik auszuführen handleConfirm() {
        dies.$refs.compRef.hide()
      },
      handleAbbrechen() {

      }
    }
  }).mount("#hallo-vue")

</Skript>
</body>
<Stil>
    * {
        Schriftgröße: 50px;
    }

    /*integrierter Übergang von Vue*/
    .list-fade-enter-active, .list-fade-leave-active {
        Übergang: Deckkraft 0,3 s;
    }

    .list-fade-enter-active .inner-wrapper, .list-fade-leave-active .inner-wrapper {
        Übergang: alle 0,3 s;
    }

    .list-fade-enter-from, .list-fade-leave-to {
        Deckkraft: 0;
    }

    .list-fade-enter-from .inner-wrapper, .list-fade-leave-to .inner-wrapper {
        transformieren: übersetzen3d(0, 100 %, 0);
    }


    /*Unterkomponentenstil*/
    .cpnContainer {
        Position: fest;
        oben: 0;
        unten: 0;
        links: 0;
        rechts: 0;
        Hintergrund: rgba(0, 0, 0, .3);
    }

    .innerer-Wrapper {
        Polsterung: 70px;
        Hintergrundfarbe: Dunkelcyan;
        Position: fest;
        unten: 0;
        Breite: 100 %;
        Box-Größe: Rahmenbox;
    }

    .schließen {
        Position: absolut;
        oben: 50px;
        rechts: 50px;
    }

    /*Komponentenstil bestätigen*/
    .bestätigen {
        Position: fest;
        oben: 0;
        unten: 0;
        links: 0;
        rechts: 0;
        Hintergrundfarbe: rgba(0, 0, 0, 0,14);
    }

    .btnContainer {
        Polsterung: 0 70px;
    }
    .confirm-wrapper{
        Position: absolut;
        oben: 50 %;
        links: 50%;
        transformieren: übersetzen(-50 %, -50 %);
        Z-Index: 999;
        Kastenschatten: 0px 0px 80px 3px rgba (0, 0, 0, 0,2);
    }
    .Inhalt bestätigen{
        Überlauf: versteckt;
        Breite: 600px;
        Rahmenradius: 13px;
        Hintergrund: weiß
    }
    .confirm-content p {
        Anzeige: Block;
        Polsterung links: 40px;
    }

    /*.Inhalt bestätigen {*/
    /* Rahmenradius: 8px;*/
    /* Boxschatten: 0px 0px 80px 3px rgba(0, 0, 0, 0,2);*/
    /* position: absolut;*/
    /* oben: 50 %;*/
    /* übrig: 50 %;*/
    /* transformieren: übersetzen(-50 %, -50 %);*/
    /* !*Der obere Rand des p-Tags beeinflusst das übergeordnete Element bfc*!*/
    /* !*Überlauf: versteckt;*!*/
    /* Hintergrundfarbe: weiß;*/
    /*}*/

    .Confirm-Content-Schaltfläche {
        Rand: 1px durchgehendes Kornblumenblau;
        Hintergrundfarbe: transparent;
        Polsterung: 25px 50px;
        Rand unten: 30px;
        Rahmenradius: 5px;
    }
    .confirm-fade-enter-active ,.confirm-fade-leave-active {
        Übergang: alle 0,3 s;
    }
    .confirm-fade-enter-from, .confirm-fade-leave-to{
        Deckkraft: 0;
    }
    .confirm-fade-enter-active .confirm-content {
        Animation: Vergrößern bestätigen 0,3 s;
        Transform-Origin: Mitte;
    }
    .confirm-fade-leave-active .confirm-content {
        Animation: Herauszoomen bestätigen 0,3 s;
        Transform-Origin: Mitte;
    }

    @keyframes Vergrößern bestätigen {
        0% {

            transformieren: Skalierung(0);
        }
        60 % {
            transformieren: Skalierung(1.1);
        }
        100 % {
            transformieren: Skalierung(1);
        }
    }
    @keyframes bestätigen-verkleinern {
        0% {
            transformieren: Skalierung(1);
        }
        30% {
            transformieren: Skalierung (0,4);
        }
        100 % {
            transformieren: Skalierung(0);
        }
    }

</Stil>
</html>

Layout

Modifizierte Version

Layout
Bildbeschreibung hier einfügen

<!DOCTYPE html>
<html>
<Kopf>
  <meta charset="utf-8">
  <Titel>Vue3</Titel>
  <script src="./vue.js"></script>
</Kopf>
<Text>
<div id="hallo-vue" class="box">
  <div>Ich bin die übergeordnete Komponente</div>
  <div>Ich bin die übergeordnete Komponente</div>
  <div>Ich bin die übergeordnete Komponente</div>
  <div>Ich bin die übergeordnete Komponente</div>
  <div>Ich bin die übergeordnete Komponente</div>
  <div>Ich bin die übergeordnete Komponente</div>
  <button @click="handleClick">Klicken Sie hier, um Unterkomponenten anzuzeigen</button>
  <cpn ref="compRef" @show-confirm="showConfirm"></cpn>
  <confirm ref="confirmRef" @confirm="handleConfirm" @cancel="handleCancel" text="Möchten Sie wirklich beenden?"</confirm>
</div>
<!--Die Komponente, die nach dem Klicken auf die Schaltfläche angezeigt wird-->
<Vorlagen-ID="mycpn">
  <teleportieren zu="body">
    <Übergangsname="Liste-Ausblenden">
      <div Klasse="cpnContainer" v-show="isshow" @click.stop="handleClose()">
        <div Klasse="inner-wrapper" @click.stop>
          Verwenden von Übergängen
          <div Klasse="Text">
            <div>Ich bin innerer Text</div>
            <div>Ich bin innerer Text</div>
            <div>Ich bin innerer Text</div>
            <div>Ich bin innerer Text</div>
            <div>Ich bin innerer Text</div>
          </div>
          <div class="close" @click="handleClose()">schließen</div>
        </div>
      </div>
    </Übergang>
  </teleportieren>


</Vorlage>

<!--Bestätigen, um die Bestätigungskomponente zu schließen-->
<template id="bestätigen">
  <teleportieren zu="body">
    <Übergangsname="Bestätigung-Ausblenden">
      <div v-show="isshow" class="bestätigen">
        <div Klasse="Bestätigungs-Wrapper">
          <div Klasse="Inhalt bestätigen">
            <p>{{text}}</p>
            <div Klasse="btnContainer">
              <button style="Hintergrundfarbe: dunkelseegrün;Rand rechts: 40px" @click="bestätigen">{{confirmBtnText}}</button>
              <button @click="abbrechen">{{cancelBtnText}}</button>
            </div>
          </div>
        </div>
      </div>
    </Übergang>
  </teleportieren>

</Vorlage>
<Skript>
  Konstante cpn = {
    Vorlage: "#mycpn",
    Requisiten: {},
    Daten() {
      zurückkehren {
        // bbb: 145612
        isshow: falsch
      }
    },
    Methoden: {
      zeigen() {
        dies.isshow = true
      },
      verstecken() {
        // console.log("ausblenden")
        this.isshow = falsch
      },
      handleClose() {
        // console.log("ausblenden")
        dies.$emit("anzeigen-bestätigen")
      },

    }
  }

  const bestätigen = {
    Vorlage: "#confirm",
    Requisiten: {
      text: {
        Typ: Zeichenfolge,
        Standard: „fdsafdasfdas“
      },
      bestätigenBtnText: {
        Typ: Zeichenfolge,
        Standard: „OK“
      },
      cancelBtnText: {
        Typ: Zeichenfolge,
        Standard: „Abbrechen“
      }
    },
    Daten() {
      zurückkehren {
        // bbb: 145612
        isshow: falsch
      }
    },
    Methoden: {
      zeigen() {
        dies.isshow = true
      },
      verstecken() {
        this.isshow = falsch
        //Anzeige der Unterkomponenten steuern},
      // Nach dem Klicken auf die Schaltfläche das Ereignis „confirm()“ an die übergeordnete Komponente senden {
        dies.verstecken();
        dies.$emit("bestätigen")
      },
      stornieren() {
        dies.ausblenden()
        dies.$emit('abbrechen')
      }
    }
  }
  const HelloVueApp = Vue.createApp({
    Daten() {
      zurückkehren {
        Nachricht: „Hallo Vue!!“
      }
    },
    Komponenten:
      cpn,
      bestätigen
    },
    Methoden: {
      handleKlick() {
        // Die übergeordnete Komponente ruft die Methode der untergeordneten Komponente auf // this.$refs.compRef.show()
        dies.$refs.compRef.show()
      },
      zeigeBestätigen() {
        Konsole.log("fdsa")
        dies.$refs.confirmRef.show()
      },
      // Klicken Sie auf „Abbrechen“ oder „Bestätigen“, um die folgende Logik auszuführen handleConfirm() {
        dies.$refs.compRef.hide()
      },
      handleAbbrechen() {

      }
    }
  }).mount("#hallo-vue")

</Skript>
</body>
<Stil>
    * {
        Schriftgröße: 50px;
    }

    /*integrierter Übergang von Vue*/
    .list-fade-enter-active, .list-fade-leave-active {
        Übergang: Deckkraft 0,3 s;
    }

    .list-fade-enter-active .inner-wrapper, .list-fade-leave-active .inner-wrapper {
        Übergang: alle 0,3 s;
    }

    .list-fade-enter-from, .list-fade-leave-to {
        Deckkraft: 0;
    }

    .list-fade-enter-from .inner-wrapper, .list-fade-leave-to .inner-wrapper {
        transformieren: übersetzen3d(0, 100 %, 0);
    }


    /*Unterkomponentenstil*/
    .cpnContainer {
        Position: fest;
        oben: 0;
        unten: 0;
        links: 0;
        rechts: 0;
        Hintergrund: rgba(0, 0, 0, .3);
    }

    .innerer-Wrapper {
        Polsterung: 70px;
        Hintergrundfarbe: Dunkelcyan;
        Position: fest;
        unten: 0;
        Breite: 100 %;
        Box-Größe: Rahmenbox;
    }

    .schließen {
        Position: absolut;
        oben: 50px;
        rechts: 50px;
    }

    /*Komponentenstil bestätigen*/
    .bestätigen {
        Position: fest;
        oben: 0;
        unten: 0;
        links: 0;
        rechts: 0;
        Hintergrundfarbe: rgba(0, 0, 0, 0,14);
    }

    .btnContainer {
        Polsterung: 0 70px;
    }
    .confirm-wrapper{
        Position: absolut;
        oben: 50 %;
        links: 50%;
        transformieren: übersetzen(-50 %, -50 %);
        Z-Index: 999;
        Kastenschatten: 0px 0px 80px 3px rgba (0, 0, 0, 0,2);
    }
    .Inhalt bestätigen{
        Überlauf: versteckt;
        Breite: 600px;
        Rahmenradius: 13px;
        Hintergrund: weiß
    }
    .confirm-content p {
        Anzeige: Block;
        Polsterung links: 40px;
    }

    /*.Inhalt bestätigen {*/
    /* Rahmenradius: 8px;*/
    /* Boxschatten: 0px 0px 80px 3px rgba(0, 0, 0, 0,2);*/
    /* position: absolut;*/
    /* oben: 50 %;*/
    /* übrig: 50 %;*/
    /* transformieren: übersetzen(-50 %, -50 %);*/
    /* !*Der obere Rand des p-Tags beeinflusst das übergeordnete Element bfc*!*/
    /* !*Überlauf: versteckt;*!*/
    /* Hintergrundfarbe: weiß;*/
    /*}*/

    .Confirm-Content-Schaltfläche {
        Rand: 1px durchgehendes Kornblumenblau;
        Hintergrundfarbe: transparent;
        Polsterung: 25px 50px;
        Rand unten: 30px;
        Rahmenradius: 5px;
    }
    .confirm-fade-enter-active ,.confirm-fade-leave-active {
        Übergang: alle 0,3 s;
    }
    .confirm-fade-enter-from, .confirm-fade-leave-to{
        Deckkraft: 0;
    }
    .confirm-fade-enter-active .confirm-content {
        Animation: Vergrößern bestätigen 0,3 s;
        Transform-Origin: Mitte;
    }
    .confirm-fade-leave-active .confirm-content {
        Animation: Herauszoomen bestätigen 0,3 s;
        Transform-Origin: Mitte;
    }

    @keyframes Vergrößern bestätigen {
        0% {

            transformieren: Skalierung(0);
        }
        60 % {
            transformieren: Skalierung(1.1);
        }
        100 % {
            transformieren: Skalierung(1);
        }
    }
    @keyframes bestätigen-verkleinern {
        0% {
            transformieren: Skalierung(1);
        }
        30% {
            transformieren: Skalierung (0,4);
        }
        100 % {
            transformieren: Skalierung(0);
        }
    }

</Stil>
</html>

Im Fall verwendetes Wissen

Wie ruft die übergeordnete Komponente die Methode der untergeordneten Komponente auf? Verwenden Sie ref, um die Komponente abzurufen und die Methode in der Komponente aufzurufen.
Informationen zu Ereignissen, um zu verhindern, dass blubbernde untergeordnete Komponenten Ereignisse an übergeordnete Komponenten senden (emit)
Kastenschatten
Frage zur Vue-Übergangsanimation: Warum kann die Zoom-Bestätigungsanimation nicht auf dem Container, sondern nur auf dem Inhalt platziert werden?

Dies ist das Ende dieses Artikels über die Demo zur Verwendung von Vue3 Teleport. Weitere relevante Inhalte zur Verwendung von Vue3 Teleport finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • Detaillierte Erklärung zur Verwendung von Teleport, einer integrierten Komponente von Vue3
  • Detaillierte Erklärung zur Verwendung von Teleport in Vue3
  • Detaillierte Erklärung zur Verwendung der vue3 Teleport-Sofortbewegungsfunktion

<<:  Grundlegendes HTML-Verzeichnisproblem (Unterschied zwischen relativem und absolutem Pfad)

>>:  So verbinden Sie Navicat mit der Docker-Datenbank auf dem Server

Artikel empfehlen

PostgreSQL-Materialisierte Ansichtsprozessanalyse

Dieser Artikel stellt hauptsächlich die Prozessan...

HTML-Grammatik-Enzyklopädie_HTML-Sprachgrammatik-Enzyklopädie (unbedingt lesen)

Datenträgerbezeichnung, Eigenschaftsname, Beschre...

vue+el-upload realisiert den dynamischen Upload mehrerer Dateien

vue+el-upload Dynamischer Upload mehrerer Dateien...

Unterschied zwischen den Methoden querySelector und getElementById in JS

Inhaltsverzeichnis 1. Übersicht 1.1 Verwendung vo...

So implementieren Sie einen Animationsübergangseffekt im Frontend

Inhaltsverzeichnis Einführung Traditionelle Überg...

Eine kurze Analyse des Unterschieds zwischen FIND_IN_SET() und IN in MySQL

Ich habe die Mysql FIND_IN_SET-Funktion vor einig...

Mehrere gängige Methoden für CSS-Layouts mit gleicher Höhe

Gleichhohes Layout Bezieht sich auf das Layout vo...

Detaillierter Prozess zum Erstellen von MongoDB und MySQL mit Docker-Compose

Schauen wir uns die detaillierte Methode zum Erst...

SQL-Implementierung von LeetCode (196. Doppelte Postfächer löschen)

[LeetCode] 196.Doppelte E-Mails löschen Schreiben...

So konfigurieren Sie MySQL auf einem Ubuntu-Server und implementieren eine Remote-Verbindung

Server: Ubuntu Server 16.04 LSS Kunde: Ubuntu 16....

Eine kurze Diskussion über benutzerdefinierte VUE-Uni-App-Komponenten

1. Übergeordnete Komponenten können Daten über Re...

So stellen Sie versehentlich gelöschte Nachrichtendateien unter Linux wieder her

Wenn Dateien von einem Prozess verwendet und vers...

Gemeinsame Überprüfung beider Vue-Felder zur Realisierung der Kennwortänderungsfunktion

Inhaltsverzeichnis 1. Einleitung 2. Implementieru...

So verwenden Sie CSS, um zwei in der Mitte fixierte und adaptive Spalten zu erreichen

1. Verwenden Sie absolute Positionierung und Ränd...

Detaillierte Erklärung verschiedener HTTP-Rückgabestatuscodes

Wenn an Ihren Server eine Anforderung zum Anzeige...