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

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