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

React implementiert Import und Export von Excel-Dateien

Inhaltsverzeichnis Präsentationsschicht Geschäfts...

Beispiel für die Implementierung einer To-Do-Anwendung mit Vue

Hintergrund Zunächst möchte ich sagen, dass ich k...

JavaScript zum Implementieren einer einfachen Tab-Leiste zum Wechseln der Inhaltsleiste

In diesem Artikel wird der spezifische JavaScript...

Methode zur Behebung von IE6-Space-Bugs

Schauen Sie sich den Code an: Code kopieren Der Co...

Wissenspunkte und Nutzungsdetails zu globalen Variablen und globalen Objekten von Nodejs

1. Globales Objekt Alle Module können aufgerufen ...

CentOS6.8 verwendet cmake zur Installation von MySQL5.7.18

Unter Bezugnahme auf die Online-Informationen hab...

Beispiel für horizontale und vertikale Zentrierung eines Div-Unterelements mit CSS

Div-Grundlayout <div Klasse="Haupt"&...

Zusammenfassung verschiedener Möglichkeiten zum Erstellen von Objekten in js und ihrer Vor- und Nachteile

Inhaltsverzeichnis Frühe Erstellungsmethode Fabri...

So erstellen Sie einen vollständigen Samba-Server unter Linux (CentOS-Version)

Vorwort smb ist der Name eines Protokolls, das fü...

MySQL 5.0.96 für Windows x86 32-Bit Green - vereinfachte Version - Installations-Tutorial

MySQL 5.0 ist aufgrund seiner wenigen „erweiterte...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.12

Das Download- und Installationstutorial für MySQL...

Detaillierte Erläuterung der SRIOV-Passthrough-Konfiguration und Leistungstests basierend auf KVM

SRIOV-Einführung, VF-Passthrough-Konfiguration un...

Mysql8.0 verwendet Fensterfunktionen, um Sortierprobleme zu lösen

Einführung in MySQL-Fensterfunktionen MySQL unter...

Detaillierte Erläuterung der offiziellen Gesichtsüberprüfung des WeChat Mini-Programms

Das Miniprogramm sammelte persönliche Benutzerinf...

MySQL effiziente Abfrage Left Join und Gruppieren nach (plus Index)

MySQL effiziente Abfrage MySQL verzichtet auf „Gr...