Comment implémenter le composant de menu arborescent dans Uniapp

Comment implémenter un composant de menu arborescent dans uniapp

Introduction :
Le menu arborescent est une structure de menu courante, généralement utilisée pour afficher des structures de données plates et présentée aux utilisateurs sous la forme d'une structure arborescente. Dans uniapp, nous pouvons utiliser l'idée du développement de composants pour implémenter un composant de menu arborescent universel, que les développeurs peuvent facilement réutiliser dans différents projets. Cet article expliquera comment implémenter le composant de menu arborescent dans uniapp et fournira des exemples de code pertinents.

Étapes de mise en œuvre :
Étape 1 : Créer un composant de menu arborescent
Tout d'abord, créez un composant de menu arborescent dans le projet uniapp et nommez-le TreeMenu.

1.1 Créez un nouveau dossier dans le répertoire des composants et nommez-le TreeMenu.
1.2 Créez trois fichiers dans le répertoire TreeMenu : TreeMenu.vue (corps du composant), treeMenu.css (style du composant), index.js (enregistrement du composant).

Étape 2 : Écrire le composant TreeMenu
Ensuite, nous définissons le contenu spécifique du composant de menu arborescent dans le fichier 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 par défaut {
props : {

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

},
méthodes : {

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

}
}
2cacc6d41bbb37262a98f745aa00fbf0

30e8033e360bcffb1ce9b4703e10b64c
.tree-menu {
margin : 0;
padding : 0;
}

.tree-menu- item {
padding-left : 20px;
curseur : pointeur;
}

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

Étape 3 : Enregistrez le composant TreeMenu
Dans le fichier index.js, enregistrez le composant TreeMenu en tant que composante globale.

importer Vue depuis 'vue'
importer TreeMenu depuis './TreeMenu.vue'

Vue.component('TreeMenu', TreeMenu)

Étape 4 : Utilisez le composant TreeMenu
Enfin, où vous devez utiliser l'arborescence menu Introduisez le composant TreeMenu et transmettez les données correspondantes.

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

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

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
export par défaut {
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

Résumé :
Grâce aux étapes ci-dessus, nous pouvons implémenter un simple composant de menu arborescent dans uniapp. Tout d'abord, nous avons créé un composant nommé TreeMenu, puis avons défini la structure et la logique d'interaction du menu arborescent dans ce composant. Ensuite, nous enregistrons le composant TreeMenu en tant que composant global afin qu'il puisse être utilisé n'importe où dans le projet. Enfin, introduisez le composant TreeMenu dans la page qui doit utiliser le menu arborescent et affichez le contenu du menu en transmettant des données. Grâce à l'exemple de code ci-dessus, nous pouvons personnaliser le composant de menu arborescent en fonction de nos propres besoins et l'appliquer de manière flexible dans uniapp.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!