So implementieren Sie die Baummenükomponente in Uniapp

So implementieren Sie eine Baummenükomponente in uniapp

Einführung:
Das Baummenü ist eine gängige Menüstruktur, die normalerweise zur Anzeige flacher Datenstrukturen verwendet und Benutzern in Form einer Baumstruktur präsentiert wird. In Uniapp können wir die Idee der Komponentenentwicklung nutzen, um eine universelle Baummenükomponente zu implementieren, die für Entwickler praktisch ist und in verschiedenen Projekten wiederverwendet werden kann. In diesem Artikel wird die Implementierung der Baummenükomponente in uniapp vorgestellt und relevante Codebeispiele bereitgestellt.

Implementierungsschritte:
Schritt 1: Erstellen Sie eine Baummenükomponente.
Erstellen Sie zunächst eine Baummenükomponente im Uniapp-Projekt und nennen Sie sie TreeMenu.

1.1 Erstellen Sie einen neuen Ordner im Komponentenverzeichnis und nennen Sie ihn TreeMenu.
1.2 Erstellen Sie drei Dateien im TreeMenu-Verzeichnis: TreeMenu.vue (Komponentenkörper), treeMenu.css (Komponentenstil), index.js (Komponentenregistrierung).

Schritt 2: Schreiben Sie die TreeMenu-Komponente
Als nächstes definieren wir den spezifischen Inhalt der Tree-Menü-Komponente in der Datei TreeMenu.vue.

d477f9ce7bf77f53fbcf36bec1b69b7a
8b2e48a3d9011bf639e3fbceadd07fb5

<ul>
  <li v-for="item in data" :key="item.id">
    <div class="tree-menu-item" @click="toggleChildren(item)">
      <span>{{ item.name }}</span>
      <i class="icon" :class="{ 'icon-open': item.open }"></i>
    </div>
    <ul v-if="item.children && item.open">
      <tree-menu :data="item.children"></tree-menu>
    </ul>
  </li>
</ul>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {
props: {

data: {
  type: Array,
  default: () => []
}

},
Methoden: {

toggleChildren(item) {
  item.open = !item.open;
}

}
}
2cacc6d41bbb37262a98f745aa00fbf0

c2860dbf0fe9f551910eda5bb93d65bb
.tree-menu {
margin: 0;
padding: 0;
}

.tree-menu- item {
padding-left: 20px;
Cursor: Zeiger;
}

.icon {
display: inline-block;
width: 10px;
height: 10px;
margin-right: 5px;
background-color: #000;
}
.icon-open {
Hintergrundfarbe: #f00;
}
531ac245ce3e4fe3d50054a55f265927

Schritt 3: Registrieren Sie die TreeMenu-Komponente
Registrieren Sie in der Datei index.js die TreeMenu-Komponente als globale Komponente.

Vue aus 'vue' importieren
TreeMenu aus './TreeMenu.vue' importieren

Vue.component('TreeMenu', TreeMenu)

Schritt 4: Verwenden Sie die TreeMenu-Komponente
Schließlich, wo Sie den Baum verwenden müssen menu Führen Sie die TreeMenu-Komponente ein und übergeben Sie die entsprechenden Daten.

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<tree-menu :data="menuData"></tree-menu>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {
data() {

return {
  menuData: [
    {
      id: 1,
      name: '菜单1',
      children: [
        {
          id: 2,
          name: '菜单1-1',
          children: [
            {
              id: 3,
              name: '菜单1-1-1'
            },
            {
              id: 4,
              name: '菜单1-1-2'
            }
          ]
        },
        {
          id: 5,
          name: '菜单1-2'
        }
      ]
    },
    {
      id: 6,
      name: '菜单2'
    }
  ]
}

}
}
3fa3f474cbb4b6d948eebecb1be5dde4

Zusammenfassung:
Durch die obigen Schritte können wir eine einfache Baummenükomponente in Uniapp implementieren. Zuerst haben wir eine Komponente namens TreeMenu erstellt und dann die Struktur und Interaktionslogik des Baummenüs in dieser Komponente definiert. Als nächstes registrieren wir die TreeMenu-Komponente als globale Komponente, damit sie überall im Projekt verwendet werden kann. Führen Sie abschließend die TreeMenu-Komponente in die Seite ein, die das Baummenü verwenden muss, und zeigen Sie den Menüinhalt durch Übergabe von Daten an. Mit dem obigen Beispielcode können wir die Baummenükomponente an unsere eigenen Bedürfnisse anpassen und sie flexibel in Uniapp anwenden.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Baummenükomponente in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!