Mehrere Möglichkeiten zum Kapseln von Breadcrumb-Funktionskomponenten in Vue3

Inhaltsverzeichnis

Vorwort
1. Warum brauchen wir Semmelbrösel?
2. Primärverpackung

1. Umsetzungsideen
2. Code-Demonstration
3. Nutzung
4. Nachteile

3. Fortschrittliche Verpackung

1. Umsetzungsideen
2. Code-Demonstration
3. Nutzung
4. Nachteile

4. Hochwertige Verpackung

1. Idee
2. Code-Demonstration
3. Nutzung

5. Verwenden Sie JSX-Optimierung

Zusammenfassen

Vorwort

Die Breadcrumb-Navigation kann die von Ihnen durchsuchten Seiten aufzeichnen, sodass Sie schnell zu einer bestimmten Seite zurückspringen können. Dieser Artikel stellt verschiedene Möglichkeiten vor, Breadcrumb-Komponenten selbst zu kapseln. Schauen wir uns an, wie man sie implementiert~

1. Warum brauchen wir Semmelbrösel?

Das Konzept der Brotkrümelnavigation stammt aus dem Märchen „Hänsel und Gretel“. Als Hänsel und Gretel durch den Wald gingen, verirrten sie sich versehentlich, fanden jedoch auf dem Weg verstreute Brotkrümel, die ihnen halfen, den Weg nach Hause zu finden.

Nachdem Sie die obige Einführung gelesen haben, glaube ich, dass Sie die Verwendungsszenarien der Breadcrumb-Komponente verstanden haben. Ja, das stimmt. Es wird verwendet, um aufzuzeichnen, auf welche Seiten wir geklickt haben, damit wir zu einer vorherigen Seite zurückkehren können.

Bei mehrmaligem Springen einer Webseite kann dem Nutzer bereits schwindelig werden. Wo wir uns gerade befinden, können wir als Programmierer zwar möglicherweise an den Parametern der Adressleiste erkennen, schließlich soll dem Benutzer die Webseite angezeigt werden. Wenn Benutzer die Webseite ohne Breadcrumb-Navigation verwenden, entwickeln sie möglicherweise eine Resistenz dagegen. Die Verwendung der Breadcrumb-Navigation zur Aufzeichnung jedes Seitensprungs kann dieses Problem gut lösen.

2. Primärverpackung

1. Umsetzungsideen

Bereiten Sie die Seitenstruktur und den Stil vor. Es werden Schriftsymbole benötigt.

Importieren Sie die Schriftsymbolressourcen vom CDN in index.html im öffentlichen Verzeichnis

<link rel="stylesheet" href="//at.alicdn.com/t/font_2143783_iq6z4ey5vu.css" rel="externes Nofollow" >

Definieren Sie den Wert, der von außen als benutzerdefiniertes Attribut übergeben werden muss

Platzieren Sie den extern innerhalb des Tags geschriebenen Inhalt im Standard-Slot

2. Code-Demonstration

Erstellen Sie eine neue Datei bread-crumbs.vue im Verzeichnis src/components. Allgemeine Komponenten werden zur einheitlichen Verwaltung in diesem Verzeichnis abgelegt und der Dateiname kann angepasst werden.

Der Code lautet wie folgt (Beispiel):

<Vorlage>
  <div Klasse='Brotkrümel'>
    <div Klasse="Brotkrümelelement">
      <RouterLink zu="/">Zuhause</RouterLink>
    </div>
    <i class="iconfont icon-angle-right"></i>

    <div v-if="übergeordneterName" Klasse="Brotkrümelelement">
      <RouterLink v-if="übergeordneterPfad" :to="übergeordneterPfad">{{übergeordneterName}}</RouterLink>
      <span v-else>{{parentName}}</span>
    </div>

    <i v-if="übergeordneterName" Klasse="iconfont icon-angle-right"></i>

    <div Klasse="Brotkrümelelement">
      <span>
          <Steckplatz/>
      </span>
    </div>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: 'BreadCrumbs',
  Requisiten: {
    übergeordneterName: {
      Typ: Zeichenfolge,
      Standard: ''
    },
    übergeordneter Pfad: {
      Typ: Zeichenfolge,
      Standard: ''
    }
  }
}
</Skript>

<Stil scoped lang='less'>
.Paniermehl{
  Anzeige: Flex;
  Polsterung: 25px 10px;
  &-Artikel {
    A {
      Textdekoration: keine;
      Farbe: #666;
      Übergang: alle .4s;
      &:schweben {
        Farbe: #27ba9b;
      }
    }
  }
  ich {
    Schriftgröße: 12px;
    Schriftstil: normal;
    Rand links: 5px;
    Rand rechts: 5px;
    Zeilenhöhe: 22px;
  }
}
</Stil>

Erstellen Sie eine neue Datei index.js im Verzeichnis src/components und registrieren Sie die gekapselten globalen Komponenten

Importiere BreadCrumbs aus „./bread-crumbs“

Standard exportieren {
  installieren (App) {
    app.komponente(BreadCrumbs.name, BreadCrumbs)
  }
}

Als Plugin in main.js registrieren

importiere { createApp } von 'vue'
App aus „./App.vue“ importieren
Router aus „./router“ importieren
Store aus „./store“ importieren
// Importieren und registrieren importiere myUI aus './components'

createApp(App).verwenden(store).verwenden(router).verwenden(myUI).mount('#app')

3. Nutzung

Übergeben Sie die von der öffentlichen Komponente benötigten Werte

Der Code lautet wie folgt (Beispiel):

<Vorlage>
  <div Klasse="Home-Banner">
    <bread-crumbs parentPath="/xxx" parentName="Elektrogeräte">Klimaanlage</bread-crumbs>
  </div>
</Vorlage>

<Skript>

Standard exportieren {
  Name: "App",
  aufstellen() {
  }
}
</Skript>

4. Nachteile

Es kann lediglich grundlegende Bedürfnisse abdecken und ist über die zweite Navigationsebene hinaus nicht nutzbar.

3. Fortschrittliche Verpackung

1. Umsetzungsideen

Siehe den ElementUI-Breadcrumb-Komponentencode

<el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{ path: '/' }">Startseite</el-breadcrumb-item>
  <el-breadcrumb-item><a href="/" rel="external nofollow" >Aktivitätsmanagement</a></el-breadcrumb-item>
  <el-breadcrumb-item>Aktivitätsliste</el-breadcrumb-item>
  <el-breadcrumb-item>Veranstaltungsdetails</el-breadcrumb-item>
</el-breadcrumb>

Kapseln Sie jede Navigation als Komponente

2. Code-Demonstration

Verbessern Sie den Code weiter basierend auf dem vorherigen Schritt der Kapselung

Der Code lautet wie folgt (Beispiel):

Erstellen Sie eine neue Breadcrumbs-Item-Komponente im Verzeichnis src/component. Der Dateiname kann angepasst werden.

<Vorlage>
  <div Klasse="Brotkrümelelement">
    <RouterLink v-if="zu" :zu="zu"><slot /></RouterLink>
    <span v-else><slot /></span>
    <i class="iconfont icon-angle-right"></i>
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  Name: 'BreadCurmbsItem',
  Requisiten: {
    Zu:
      Typ: [String, Objekt]
    }
  }
}
</Skript>

Oder registrieren Sie es als globale Komponente in index.js im Verzeichnis src/components

Importiere BreadCrumbs aus „./bread-crumbs“
Importiere BreadCrumbsItem aus „./bread-crumbs-item“

Standard exportieren {
  installieren (App) {
    app.komponente(BreadCrumbs.name, BreadCrumbs)
    App.Komponente(BreadCrumbsItem.name, BreadCrumbsItem)
  }
}

Ändern Sie den Code in BreadCrumbs.vue, um jedes Navigationselement im Standard-Slot zu platzieren

<Vorlage>
  <div Klasse='Brotkrümel'>
    <Steckplatz />
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "Brotkrümel"
}
</Skript>

<Stil scoped lang='less'>
.Brotkrümel {
  Anzeige: Flex;
  Polsterung: 25px 10px;
  :tief(&-item) {
    A {
      Textdekoration: keine;
      Farbe: #666;
      Übergang: alle 0,4 s;
      &:schweben {
        Farbe: #27ba9b;
      }
    }
  }
  :tief(i) {
    Schriftstil: normal;
    Schriftgröße: 12px;
    Rand links: 5px;
    Rand rechts: 5px;
    Zeilenhöhe: 22px;
  }
}
</Stil>

3. Nutzung

Verwenden Sie bei der Verwendung so viele BreadCrumbsItems, wie sekundäre Navigationen vorhanden sind.

Der Code lautet wie folgt (Beispiel):

<Vorlage>
  <div Klasse="Home-Banner">
  	<!-- Brotkrümel -->
    <BreadCrumbs>
        <BreadCrumbsItem to="/">Startseite</BreadCrumbsItem>
        <BreadCrumbsItem to="/xxx">Elektrogeräte</BreadCrumbsItem>
        <BreadCrumbsItem >Klimaanlage</BreadCrumbsItem>
    </BreadCrumbs>
  </div>
</Vorlage>

<Skript>

Standard exportieren {
  Name: "App",
  aufstellen() {
  }
}
</Skript>

4. Nachteile

Nach der letzten Navigation wird ein zusätzlicher >-Indikator angezeigt.

4. Hochwertige Verpackung

1. Idee

Die ultimative Version: Nutzen Sie die Renderfunktion, um die Spleiße selbst zu erstellen.

Element erstellen

Render-Render-Optionen und H-Funktion

Geben Sie den von der Komponente angezeigten Inhalt an: new Vue({options})

Die Option el findet den Container über einen Selektor, und der Containerinhalt ist der Komponenteninhalt
Vorlagenoption, <div>Komponenteninhalt</div> als Komponenteninhalt
Die Renderoption ist eine Funktion, die standardmäßig an die Funktion createElement (h) übergeben wird. Diese Funktion wird zum Erstellen der Struktur verwendet, und anschließend gibt die Renderfunktion den gerenderten Komponenteninhalt zurück. Es hat eine höhere Priorität.

2. Code-Demonstration

Ändern Sie den Code in der Komponente BreadCurmbsItem

<Vorlage>
  <div Klasse="Brotkrümelelement">
    <RouterLink v-if="zu" :zu="zu"><slot /></RouterLink>
    <span v-else><slot /></span>
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  Name: 'BreadCurmbsItem',
  Requisiten: {
    Zu:
      Typ: [String, Objekt]
    }
  }
}
</Skript>

Ändern Sie den Code in BreadCrumbs.vue

Codebeispiel (unten):

<Skript>
importiere { h } von 'vue'
Standard exportieren {
  Name: 'BreadCrumbs',
  rendern () {
    // Verwendung // 1. Entfernen Sie das Vorlagentag, die Einzeldateikomponente // 2. Der Rückgabewert ist der Komponenteninhalt // 3. Die h-Funktion von vue2.0 wird übergeben und die h-Funktion von vue3.0 wird importiert // 4. h Der erste Parameter ist der Tag-Name, der zweite Parameter ist das Tag-Attributobjekt und der dritte Parameter ist der untergeordnete Knoten // Voraussetzungen // 1. Erstellen Sie einen übergeordneten Breadcrumbs-Container // 2. Holen Sie sich den Standard-Slot-Inhalt // 3. Entfernen Sie das i-Tag der Breadcrumbs-Elementkomponente, die von der Renderfunktion organisiert werden soll // 4. Durchlaufen Sie die Elemente im Slot und holen Sie sich einen dynamisch erstellten Knoten. Das letzte Element hat kein i-Tag // 5. Rendern Sie die dynamisch erstellten Knoten im Breadcrumbs-Tag const items = this.$slots.default()
    const dynamischeItems = []
    Elemente.fürJedes((Element, i) => {
      dynamischeItems.push(Artikel)
      wenn (i < (Elemente.Länge - 1)) {
        dymanicItems.push(h('i', { Klasse: 'Iconfont Icon-Winkel-rechts' }))
      }
    })
    returniere h('div', { Klasse: 'Brotkrümel' }, dynamischeElemente)
  }
}
</Skript>

<style lang='less'>
// Entfernen Sie das Scope-Attribut, damit der Stil in die Elementkomponente eindringen kann.bread-crumbs {
  Anzeige: Flex;
  Polsterung: 25px 10px;
   &-Artikel {
    A {
      Textdekoration: keine;
      Farbe: #666;
      Übergang: alle .4s;
      &:schweben {
        Farbe: #27ba9b;
      }
    }
  }
  ich {
    Schriftgröße: 12px;
    Rand links: 5px;
    Rand rechts: 5px;
    Zeilenhöhe: 22px;
    // Der Stil ist nicht sinnvoll // &:last-child {
    // Anzeige: keine;
    // }
  }
}
</Stil>

3. Nutzung

Diese Kapselungsmethode macht die globalen Komponenten wiederverwendbarer und wird dringend empfohlen.

<Vorlage>
  <div Klasse="Home-Banner">
    <!-- Brotkrümel -->
    <BreadCrumbs>
        <BreadCrumbsItem to="/">Startseite</BreadCrumbsItem>
        <BreadCrumbsItem to="/xxx">Elektrogeräte</BreadCrumbsItem>
        <BreadCrumbsItem to="/xxx/xx">Klimaanlage</BreadCrumbsItem>
        <BreadCrumbsItem >Fernbedienung</BreadCrumbsItem>
    </BreadCrumbs>
  </div>
</Vorlage>

<Skript>

Standard exportieren {
  Name: "App",
  aufstellen() {
  }
}
</Skript>

Es ist ersichtlich, dass unsere eigene gekapselte Breadcrumb-Navigation nach dieser Kapselung bereits eine mehrstufige Navigation unterstützt. Und der >-Indikator nach der letzten Navigation ist weg.

5. Verwenden Sie JSX-Optimierung

Der Funktionscode in der High-Level-Schreibmethode kann mit jsx neu geschrieben werden. Der von jsx geschriebene Code ist prägnanter und klarer.

Standard exportieren {
  Name: 'BreadCrumbs',
  rendern () {
    // Der Parameter der Renderfunktion von vue2 ist die h-Funktion // Die h-Funktion in vue3 wird importiert // createElement (Tagname, Tagattribute, Tagunterelemente)
    // Konsole.Verzeichnis(this.$slots.default())
    // Alle Slots der XtxBread-Komponente abrufen und mit Komponenteninstanzen füllen const items = this.$slots.default()
    const Ergebnisse = []
    Elemente.fürJedes((Element, Index) => {
      Ergebnisse.push(Element)
      // Manuell ein i-Symbol generieren und am Ende des Breadcrumb-Elements hinzufügen if (index < items.length - 1) {
        Ergebnisse.push(<i className='iconfont icon-angle-right'></i>)
      }
    })

    return <div className='bread-crumbs'>{Ergebnisse}</div>
  }
}

Zusammenfassen

Obwohl die Funktion klein ist, deckt sie viele Wissenspunkte ab. Die obigen Codes wurden lokal getestet.

Dies ist das Ende dieses Artikels über die selbstgekapselte Breadcrumb-Funktionskomponente von Vue3. Weitere relevante Inhalte zur gekapselten Breadcrumb-Funktionskomponente von Vue3 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!

Das könnte Sie auch interessieren: