Kapselungsmethode der Vue-Breadcrumbs-Komponente

Vue kapselt die Breadcrumb-Komponente zu Ihrer Information. Die spezifischen Inhalte sind wie folgt

Um den Effekt zu erzielen

Vorwort

Viele E-Commerce-Produkte müssen eine Breadcrumb-Navigation implementieren, um das Benutzererlebnis zu optimieren

1. Primäre Breadcrumb-Paketkomponenten

1. Kapselung der Infrastrukturkomponente Bread.vue

<Vorlage>
  <div Klasse='xtx-Brot'>
    <div Klasse="xtx-bread-item">
      <RouterLink zu="/">Zuhause</RouterLink>
    </div>
    <i class="iconfont icon-angle-right"></i>
    <div Klasse="xtx-Brot-Artikel">
      <RouterLink to="/category/10000">Sekundäre Navigation</RouterLink>
    </div>
    <i class="iconfont icon-angle-right"></i>
    <div Klasse="xtx-bread-item">
      <span>Navigation der dritten Ebene</span>
    </div>
  </div>
</Vorlage>

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

2. Definieren Sie Props, um parentPath- und parentName-Eigenschaften sowie Standard-Slots verfügbar zu machen und Komponenten dynamisch zu rendern.

<div Klasse='xtx-Brot'>
     <div Klasse="xtx-bread-item">
       <RouterLink zu="/">Zuhause</RouterLink>
     </div>
     <i class="iconfont icon-angle-right"></i>
    <Vorlage v-if="übergeordneterName">
     <div Klasse="xtx-bread-item" v-if="übergeordneterName">
       <RouterLink v-if="parentPath" to="/category/10000">{{parentName}}</RouterLink>
       <span v-else>{{parentName}}</span>
     </div>
    </Vorlage>
    <i v-if="übergeordneterName" Klasse="iconfont icon-angle-right"></i>
    <div Klasse="xtx-bread-item">
      <span> <slot/> </span>
    </div>
  </div>
// Verwenden Sie Props, um Daten zu empfangen. Props: {
    übergeordneterName: {
      Typ: Zeichenfolge,
      Standard: ''
    },
    übergeordneter Pfad: {
      Typ: Zeichenfolge,
      Standard: ''
    }
  }

3. Komponenten registrieren und Verifizierungseffekte nutzen

importiere Bread aus „./Bread“
Standard exportieren {
  installieren (App) {
    // In Vue2 ist der Parameter der Vue-Konstruktor // In Vue3 ist der Parameter das Instanzobjekt der Stammkomponente // Konfigurieren Sie eine globale Komponente app.component(Bread.name, Bread)
  }
}

4. Komponenten verwenden

<Bread parentPath="/category/1005000" parentName="Bekleidung">Flying Knit-Serie</Bread>
<Bread parentName="Apparel">Flying Weave Series</Bread> //Kann nach dem Entfernen von parentPath nicht springen

2. Erweiterte Verpackung Infinitus-Navigation

Siehe die Breadcrumb-Komponente von element-ui:

<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>

1. Kapselung der Infrastrukturkomponente BrendItem.vue

<Vorlage>
  <div Klasse="xtx-Brot-Artikel">
    <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: "XtxBreadItem",
  Requisiten: {
    Zu:
      Typ: [String, Object] //Der Wert von to kann entweder ein String oder ein Objekt sein}
  }
}
</Skript>
//Bei Verwendung von <bread-item to="/xxx/id"></bread-item>
<Brotelement: bis = '{Pfad:"/xxx/id"}'></Brotelement>

2. Kapseln Sie Brend.vue ein

<Vorlage>
  <div Klasse='xtx-Brot'>
    <Steckplatz />
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: „XtxBread“
}
</Skript>

<Stil scoped lang='less'>
.xtx-Brot {
  Anzeige: Flex;
  Polsterung: 25px 10px;
  :tief(&-item) {
    A {
      Farbe: #666;
      Übergang: alle 0,4 s;
      &:schweben {
        Farbe: @xtxColor;
      }
    }
  }
  :tief(i) {
    Schriftgröße: 12px;
    Rand links: 5px;
    Rand rechts: 5px;
    Zeilenhöhe: 22px;
  }
}
</Stil>

3. Registrierung

importiere BreadItem aus „./BreadItem“
importiere Bread aus „./Bread“
Standard exportieren {
  installieren (App) {
    // In Vue2 ist der Parameter der Vue-Konstruktor // In Vue3 ist der Parameter das Instanzobjekt der Stammkomponente // Konfigurieren Sie eine globale Komponente app.component(Bread.name, Bread)
    app.komponente(BreadItem.name, BreadItem)
  }
}

4. Nutzung

// Brotkrümel
    <BreadItem to="/">Startseite</XtxBreadItem>
    <BreadItem to="/category/1005000">Kleidung</XtxBreadItem>
    <BreadItem >Flying Weave-Serie</XtxBreadItem>
</XtxBread>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren: