Ist es einfach, mit Vue3 eine Popup-Komponente zu kapseln?

Zusammenfassung zuerst:

Tipps: Die gekapselte Popup-Komponente verwendet Teleport, um die versteckten Gefahren der Positionierungshierarchie zu vermeiden, die durch die Verschachtelung von Komponenten entstehen können. Außerdem verwendet sie defineProps, defineEmits und Slots, um die Erweiterbarkeit der Komponente zu erhöhen.

🌲🌲 Vorwort:

Ich habe selbst noch nie eine Popup-Fensterkomponente gekapselt, aber ich denke, dass eine kleine Popup-Fensterkomponente keine Kleinigkeit ist. Dann brauchte ich heute eine Popup-Komponente in meinem neuen Projekt, also habe ich eine erstellt. Es macht nichts, wenn Sie es nicht tun. Wenn Sie es tun, werden Sie feststellen, dass es immer noch viele verschiedene kleine Probleme gibt, und dann teilen Sie die Probleme, auf die Sie stoßen, mit den Großen.

Beginnen wir mit der Überprüfung der Anforderungen für eine global verwendete öffentliche Popup-Fensterkomponente. Dann gibt es mehrere Schlüsselpunkte: öffentlich, global und Popup-Fenster. Lassen Sie uns die Popup-Fensterkomponente nach und nach basierend auf diesen Schlüsselpunkten implementieren.

🍬🍬Öffentlich🍬🍬

Das ist ganz einfach. Ich glaube, dass alle großen Jungs hier das problemlos hinbekommen.

Implementieren Sie zunächst einen Hauptinhalt. Meine Methode besteht darin, Slots und Parameterübergabe zu verwenden. Das Beispiel übergibt einfach zwei Parameter, einen Titelinhalt und einen Booleschen Wert, der steuert, ob er ein- oder ausgeschaltet ist. Dabei handelt es sich hauptsächlich um die Verwendung von zwei Vue3-APIs: defineProps, defineEmits und Slots.

<Vorlage>
    <Maske @click="close" /> // Maskenebene <div class="modal_all" v-if="visible">
        <slot name="header"> // Praktisch zum Hinzufügen benutzerdefinierter Kopfzeilen zur Seite<div class="modal_header">
                <p class="modal_header_title">{{ Titel }}</p>
                <p class="modal_header_img" @click="schließen"></p>
            </div>
        </slot>
        <div Klasse="modaler_Inhalt">
            <slot></slot> //Popup-Inhalt öffnen</div>
    </div>
</Vorlage>
<script lang="ts" setup>
defineProps({
    sichtbar:
        Typ: Boolean,
        Standard: false,
    },
    Titel:
        Typ: Zeichenfolge,
    },
});
const emit = defineEmits(['update:sichtbar']);
const schließen = () => {
    emittieren('update:sichtbar', false);
};
</Skript>
// Stil ausgelassen

🍬🍬Weltweit🍬🍬

Das grundlegende Layout ist fast fertig, es folgt die globale Registrierung, deren Zweck es ist, diese nicht bei jeder Verwendung neu eingeben zu müssen.

Beim Registrieren globaler Komponenten in vue2 können Sie einfach Vue.component('name', component) verwenden. Wie registrieren Sie also globale Komponenten in Stapeln in vue3? Stellen Sie eine Installationsmethode bereit, die automatisch mit app.use() aufgerufen wird.

importiere Modal aus „./Modal/Modal.vue“;
Importiere Maske aus „./Modal/Mask.vue“.

// Sie können im Skript-Setup keinen Namen schreiben, fügen Sie also ein const coms = [ hinzu.
  {
    Name: 'Modal', // Verwenden Sie den Komponentennamen compent: Modal,
  },
  {
    Name: 'Maske',
    Komponente: Maske,
  },
];

Standard exportieren {
  installieren: (App) => {
    coms.forEach((Artikel) => {
      app.komponente(artikel.name, artikel.komponente);
    });
  },
};

//main.ts
importiere Common aus „./common/index“;
const app = erstelleApp(App);
app.use(Allgemein);

🍬🍬Ballbox🍬🍬

Tatsächlich wurde die Popup-Fensterkomponente hier geschrieben. Warum sollten wir das Popup-Fenster also separat auflisten?

Ich glaube, dass Sie bei Ihrer täglichen Arbeit auch schon auf Positionierungs- und Hierarchieprobleme gestoßen sind. Wenn wir die Komponente, die positioniert werden muss, in einer Vue-Komponente verschachteln, wird es aufgrund der verschiedenen CSS-Ebenen sehr schwierig sein, mit der verschachtelten Positionierung, Hierarchie und dem Stil umzugehen. Wenn Sie nicht aufpassen, werden einige seltsame Probleme auftreten. Wie vermeiden Sie also dieses Problem? Als Nächstes verwenden wir eine andere Portal-API in Vue3: Teleport.

Tipps: Teleport dient zum Einbinden unserer Komponente in das DOM-Element, das dem Attribut entspricht, ähnlich einem Portal.

Zuerst der Code:

<teleportieren nach="#mask_modal" v-if="sichtbar">
    <div Klasse="modal_cent">
        <Maske @click="schließen" />
            <div Klasse="modal_all">
                <slot name="header">
                    <div Klasse="Header">
                        <p class="header_title">{{ Titel }}</p>
                        <p class="header_img" @click="schließen"></p>
                    </div>
                </slot>
            <div>
            <Steckplatz></Steckplatz>
            </div>
        </div>
    </div>
</teleportieren>

Werfen wir einen Blick auf die Hierarchie, nachdem wir Folgendes geschrieben haben:

Durch das „to“-Attribut geben wir an, dass sich die Position des Renderings der Bulletbox-Komponente auf derselben Ebene wie die Layoutkomponente befindet, der sichtbare Status des Teleports jedoch vollständig von der von uns aufgerufenen Komponente gesteuert wird. Dadurch wird das Problem der Positionierung des hierarchischen Stils vermieden, wenn wir Komponenten verschachteln.

🌼🌼 Bisher wurde fast eine einfache öffentliche Popup-Komponente geschrieben. Beim Schreiben dieser Komponente stieß ich dann dennoch auf mehrere Probleme, die nicht als Probleme betrachtet wurden 😅.

❗️❗️❗️1. Das Namensattribut kann im Skript-Setup nicht geschrieben werden:

Wenn Sie ts nicht verwenden, können Sie ein anderes Skript-Tag schreiben, es exportieren und den Namen schreiben. Wenn Sie ts verwenden, funktioniert diese Methode nicht und es wird ein Fehler gemeldet. Verwenden Sie dann die oben beschriebene Methode und definieren Sie sie selbst neu, um ein Objekt zu schreiben.

❗️❗️❗️2. Das direkte Hinzufügen einer Klasse und eines Stils zur globalen Komponente funktioniert nicht:

Wenn wir beim normalen Schreiben öffentlicher Komponenten den Stil des internen Containers direkt in der äußeren Ebene steuern möchten, in der er verwendet wird, können wir direkt außen einen Klassennamen hinzufügen, um den Stil zu verbessern. Als ich diese Popup-Komponente schrieb, funktionierte sie jedoch nicht. Nach langem Suchen stellte ich fest, dass es daran lag, dass ich Teleport verwendete, sodass die Klasse beim Parsen nicht übernommen werden konnte. Dasselbe Problem tritt auf, wenn in der Komponente keine Stammkomponente vorhanden ist. Das ist eigentlich egal. Wir können den Inhalt einfach in den Slot schreiben und er wird automatisch erweitert. Ich glaube, dass ihr so ​​eine dumme Aktion wie ich nicht machen werdet, haha.

🎉🎉🎉Fazit:

Tatsächlich ist die Kapselung einer Popup-Komponente immer noch sehr einfach, aber man kann es als das Sammeln einiger Erfahrungen und die Implementierung meines eigenen Projekts betrachten. Später wird es einfacher sein, komplexere Komponenten zu kapseln.

Dies ist das Ende dieses Artikels über die Verwendung von Vue3 zum Einkapseln einer Popup-Fensterkomponente. Weitere relevante Inhalte zu in Vue3 eingekapselten Popup-Fensterkomponenten finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!