Schritte zum Kapseln der Karussellkomponente in vue3.0

Im Anschluss an den vorherigen Artikel werden wir uns mit der grundlegenden Verwendung von vue3.0 vertraut machen und nach einer gewissen Zeit der Verwendung mit den Vorbereitungen für die Entwicklung einer für vue3.0 geeigneten PC-Komponentenbibliothek beginnen. Ich werde weiterhin die Schreibmethoden und Vorsichtsmaßnahmen einiger Komponentenbibliotheken aktualisieren. Interessierte Studenten können mehr darauf achten. Lassen Sie uns ohne weitere Umschweife loslegen.

Entwickeln Sie eine Karussellkomponente, die für den PC geeignet ist (eine App ist noch nicht in Betracht gezogen), und in vue3.0 + TS verwendet wird

Die allgemeine Wirkung ist wie folgt:

Freies Bildkarussell, entsprechender Punktbildsprung, linker und rechter Indikatorsprung usw. Stellen Sie die folgende Optionskonfiguration bereit:

Oben sind die wichtigsten Optionen aufgeführt. Lassen Sie uns näher darauf eingehen, wie sie gekapselt werden können.

1: Kapselungsidee

Die Kernidee der Kapselung von Komponenten in vue3.0 und vue2.0 ist eigentlich dieselbe. Sie müssen vue.component (); verwenden, um die Komponente zu registrieren, und sie dann in main.ts mounten, um sie zu verwenden.

Erstellen Sie unter src: src --> libs --> sqm_ui (der Name Ihrer eigenen UI-Bibliothek) --> index.js

Die Datei index.js stellt hierbei den Einstiegspunkt für die Registrierung von Komponenten dar.

Erstellen Sie im selben Verzeichnis eine neue Datei, Carousel, die alle Funktionen und Stile der Karussellkomponente enthält.

Das Verzeichnis lautet wie folgt:

Eine Sache ist zu beachten: Obwohl es in vue3.0 und ts verwendet wird, verwendet die Eintragsdatei immer noch js, was auch zur Anpassung an Nicht-ts-Schreibmethoden dient.

In index.js:

Karussell aus „./Carousel/carousel“ importieren;
importiere CarItem aus „./Carousel/item“; lass SqmUI = {};
SqmUI.install = Funktion(vue) {
 vue.component(Karussell.name, Karussell);
 vue.component(AutoItem.name,AutoItem);
};
Standard-SqmUI exportieren;

Um es jedoch mit TS zu verwenden, müssen wir eine neue Datei „index.d.ts“ erstellen, um die Mitgliedstypen in der Bibliothek zu beschreiben, die TS verwenden soll.

Deklarieren Sie const _default: ({
 installieren: (app: import("vue").App<any>, ...options: any[]) => any; // Hier ist eine einfache Beschreibung der Installation});
Standard exportieren _default;

Nachdem Sie die obige Konfiguration abgeschlossen haben, verwenden Sie sie in main.ts:

importiere SqmUI aus „@/libs/sqm_ui/index“;
importiere { createApp } aus „vue“;
Erstellen Sie eine Anwendung. Verwenden Sie dazu SqmUI.

2. Verpackungsprozess

Für das Karussell benötigen wir einen festen Container, um jedes scrollende Bild zu platzieren. Zu diesem Zeitpunkt müssen wir eine Carousel.vue-Komponente definieren.

<Vorlage>
 <div Klasse="Karussell">
 <slot></slot> // Der Slot hier wird verwendet, um die Artikelkomponente zu platzieren</div>
</Vorlage>

Sie benötigen außerdem eine Komponente zum Speichern von Fotos, item.vue

<Vorlage>
 <div Klasse="Karussell-Element">
 <slot></slot> // Der Slot hier wird verwendet, um img zu platzieren
 </div>
</Vorlage>

Das Grundgerüst ist eingerichtet und wenn Benutzer es verwenden, konfigurieren sie Optionen im Karussell.

<Karussell
 :autoPlay="true" 
 :Dauer="3000" 
 :initial="3" 
 :hasDot="wahr" 
 :hasDirector="true"> </carousel>

In carousel.vue: Akzeptieren Sie die übergebenen Konfigurationselemente

Requisiten: { 
 Autoplay:  
 Typ: Boolean,  
 Standard: true }, 
 Dauer: {  
 Typ: Nummer,  
 Standard: 3000 }, 
 anfänglich: {  
 Typ: Nummer,  
 Standard: 0 }, 
 hatPunkt: {  
 Typ: Boolean,
 Standard: true }, 
 hatDirektor: { 
 Typ: Boolean,  
 Standard: true }
}

(1): Implementieren Sie autoPlay:

In carousel.vue:

const autoPlay = () => {
 wenn (props.autoplay) {
 t = setzeIntervall(() => {
  // Karusselllogik}, props.duration);
};
beimMounted(() => {
 autoPlay();
});

Die Logik ist sehr einfach. Definieren Sie eine AutoPlay-Funktion und mounten Sie sie in der gemounteten Phase.

(2): Karussell implementieren:

Denken Sie über diese Frage nach: Wie kann ich dieses Bild erscheinen lassen? Der Index des aktuellen Bildes muss mit dem Index während des Karussells übereinstimmen, um angezeigt zu werden.

In item.vue:

<div Klasse="carsel-item" v-if="selfIndex === aktuellerIndex"> 
 <Steckplatz></Steckplatz> 
</div>

Es kann nur angezeigt werden, wenn sein eigener Index dem aktuellen Index entspricht.

Aktuellen Index abrufen:

Integrierte Methode in vue3.0: getCurrentInstance()

Dies ist eine sehr wichtige Methode. Mit dieser Methode können wir die Instanz der aktuellen Komponente abrufen und dann über ctx den Kontext der Komponente abrufen. Sehr einfach zu bedienen.

In item.vue:

aufstellen() {
 const Instanz:any = getCurrentInstance(); console.log(Instanz);
}

Unter instance.vnode gibt es einen Schlüssel, der der Schlüssel jedes Bildes ist, also der Index.

Unter instance.parent.ctx ist ein currentIndex definiert, der der aktuelle Index ist.

Stimmen beide überein, kann das aktuelle Bild angezeigt werden. Wo wird also currentIndex festgelegt?

Zurück zu carousel.vue:

setup(Requisiten) { 
 const state = reaktiv({  
 aktuellerIndex: props.initial,  
 Artikellänge: 0,  
 showDir: false 
 });
}

Der aktuelle currentIndex ist der Wert des übergebenen Initials.

Bei AutoPlay: Das Karussell ausführen

const setIndex = ((dir:String): void => { 
 switch(dir) { 
 Fall 'nächster':  
  Zustand.aktuellerIndex += 1;  
  wenn (Zustand.aktuellerIndex === Zustand.Artikellänge) {   
  Zustand.aktuellerIndex = 0;  
  }  
  brechen; 
 Fall 'vorheriger':  
  Zustand.aktuellerIndex -= 1;  
  wenn (Zustand.aktuellerIndex === -1) {   
  Zustand.aktuellerIndex = Zustand.Artikellänge - 1;  
  }  
  brechen; 
 Standard:  
  brechen; 
 } 
});

Lassen Sie beim nächsten Mal currentIndex++;, bis es der Länge des Karussellbildes entspricht. (Array.Länge)

Wenn vorher, lass currentIndex--; bis === -1

Hören Sie dann in item.vue zu:

beobachten(() => {  
 Rückgabeinstanz.übergeordnet.ctx.aktuellerIndex 
 }, (Wert) => {  
 Zustand.aktuellerIndex = Wert; 
})

Damit ist das Bilderkarussell fertig.

Drei: Punktanzeige

Die Idee der Umsetzung ist dennoch denkbar einfach:

Der übergebene hasDot wird verwendet, um zu bestimmen, ob er angezeigt werden muss. Die übergebene Itemlen bestimmt, wie viele Punkte basierend auf der Anzahl der Bilder angezeigt werden. Durch Klicken auf einen Punkt wird zum entsprechenden Bild gesprungen.

In dot.vue:

<Vorlage>
 <div Klasse="dot-goes-wrapper" v-if="hasDot">
 <div Klasse="dot-item" v-for="item in itemLen" :key="item">
 <a href="javascript:;" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" 
  Klasse = "Punkt-Link"
  :style="{Hintergrundfarbe: (Element - 1) === aktuellerIndex ? dotBgColor : '#fff'}" 
  @click="dotClick(Element - 1)">
 </a> 
 </div> 
 </div>
</Vorlage>
<script lang="ts">
importiere {defineComponent} aus „vue“;
exportiere StandarddefiniereKomponente({
 Name: 'Punkt',
 Requisiten: { 
 itemLen: Zahl, 
 currentIndex: Zahl, 
 PunktHintergr.Farbe: {  
  Typ: Zeichenfolge,
  Standard: '#ff5000' },
 hatPunkt: {  
  Typ: Boolean,  
  Standard: true } 
 }, 
 setup(Eigenschaften, ctx) { 
 const dotClick = (index: Zahl) => { 
  ctx.emit('dotClick', index); 
 }; 
 zurückkehren {  
  dotClick 
 } 
}})
</Skript>

Lösen Sie das dotClick-Ereignis über ctx aus, übergeben Sie den Index und verwenden Sie ihn in der übergeordneten Komponente (Carousel.vue):

@dotClick="PunktKlick"

const dotClick = (Index: beliebig): void => {

Zustand.aktuellerIndex = Index;

};

Damit ist die Punktanzeige fertig.

Vier: Linke und rechte Blinker

Dies ist ganz einfach: Zeigen Sie es einfach beim Einfahren an und klicken Sie dann auf das Bild, um es zu verschieben.

<Vorlage> 
 <div v-if="showDir"> 
 <div class="director dir-next" v-if="dir === 'next'">  
  <a href="javascript:;" rel="externes nofollow" rel="externes nofollow" rel="externes nofollow" @click="dirClick(dir)">&gt;</a> 
 </div> 
 <div class="director dir-prev" v-else-if="dir === 'prev'">  
  <a href="javascript:;" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" @click="dirClick(dir)">&lt;</a> 
 </div> 
 </div>
</Vorlage>

<script lang="ts">
importiere {defineComponent} aus „vue“;
exportiere StandarddefiniereKomponente({ 
 Name: 'direkt', 
 Requisiten: { 
 dir: String, 
 zeigeDir: {  
  Typ: Boolean,  
  Standard: false 
 } 
 }, 
 setup(Eigenschaften, ctx) { 
 const dirClick = (dir: String) => {  
  ctx.emit('dirClick', dir); 
 }; 
 zurückkehren {  
  dirClick 
 } 
 }
})</script>

In ähnlicher Weise wird ein „dirClick“-Ereignis an die übergeordnete Komponente übergeben und „click-move“ wird in der übergeordneten Komponente ausgeführt.

Fünftens: Schließlich:

Da das Karussell durch einen Timer implementiert wird, muss der Timer zerstört werden.

beiVorUnmount(() => {

      _clearFunction();

});

Funktion _clearFunction(): void {

     Intervall löschen(t);

       t = null;

};

Stoppen Sie die automatische Wiedergabe beim Mouse-In und zeigen Sie die linken und rechten Indikatoren an:

const mouseEnter = (): void => { 
 _clearFunction();
 Zustand.showDir = true;
 }; 

Beginnen Sie mit der Wiedergabe, wenn die Maus nach außen bewegt wird und die linken und rechten Indikatoren verschwinden

 const mouseLeave = (): void => { 
  autoPlay();
  status.showDir = false; 
};

ok. Das ist die Grundidee. Es gibt einige Details, über die Sie noch nachdenken können. dankbar! !

VI: Rückblick auf frühere Ausgaben

www.jb51.net/article/206833.htm

Oben finden Sie den detaillierten Inhalt der Schritte zum Einkapseln der Karussellkomponente in vue3.0. Weitere Informationen zum Einkapseln der Karussellkomponente in vue3.0 finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!