Bagaimana untuk melaksanakan komponen menu pokok dalam uniapp

Cara melaksanakan komponen menu pokok dalam uniapp

Pengenalan:
Menu pokok ialah struktur menu biasa, biasanya digunakan untuk memaparkan struktur data rata dan dipersembahkan kepada pengguna dalam bentuk struktur pokok. Dalam uniapp, kita boleh menggunakan idea pembangunan komponen untuk melaksanakan komponen menu pokok universal, yang memudahkan pembangun untuk menggunakan semula dalam projek yang berbeza. Artikel ini akan memperkenalkan cara melaksanakan komponen menu pokok dalam uniapp dan memberikan contoh kod yang berkaitan.

Langkah pelaksanaan:
Langkah 1: Buat komponen menu pokok
Mula-mula, buat komponen menu pokok dalam projek uniapp dan namakannya TreeMenu.

1.1 Cipta folder baharu dalam direktori komponen dan namakannya TreeMenu.
1.2 Cipta tiga fail dalam direktori TreeMenu: TreeMenu.vue (badan komponen), treeMenu.css (gaya komponen), index.js (pendaftaran komponen).

Langkah 2: Tulis komponen TreeMenu
Seterusnya, kami mentakrifkan kandungan khusus komponen menu pokok dalam fail 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

855348821b2e8f2cc4b633bf98f064df
{
prop lalai },

kaedah: {

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

}

}

2cacc6d41bbb37262a98f745aa00fbf0

30e8033e360bcffb1ce9b4703e10b64c

.tree-menu {

margin: 0;
padding: 0;
}
item {
padding-left: 20px;

cursor: pointer;

}

.icon {
display: inline-block;

width: 10px;

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

Langkah 3: Daftar komponen TreeMenu
Dalam fail index.js, daftarkan komponen TreeMenu sebagai komponen global.

import Vue dari 'vue'
import TreeMenu dari './TreeMenu.vue'

Vue.component('TreeMenu', TreeMenu)

Langkah 4: Gunakan komponen TreeMenu

Akhir sekali, di mana anda perlu menggunakan pokok menu Perkenalkan komponen TreeMenu dan masukkan data yang sepadan.

& lt; template & gt;
& lt; div & gt;

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

& lt;/div & gt;
& lt;/template & gt;

& lt; script & gt; skrip>

Ringkasan:

Melalui langkah di atas, kita boleh melaksanakan komponen menu pokok ringkas dalam uniapp. Mula-mula, kami mencipta komponen bernama TreeMenu, dan kemudian menentukan struktur dan logik interaksi menu pokok dalam komponen ini. Seterusnya, kami mendaftarkan komponen TreeMenu sebagai komponen global supaya ia boleh digunakan di mana-mana dalam projek. Akhir sekali, perkenalkan komponen TreeMenu ke dalam halaman yang perlu menggunakan menu pokok, dan paparkan kandungan menu dengan menghantar data. Melalui kod sampel di atas, kami boleh menyesuaikan komponen menu pokok mengikut keperluan kami sendiri dan menggunakannya secara fleksibel dalam uniapp.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan komponen menu pokok dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!