uniappでツリーメニューコンポーネントを実装する方法

uniapp でツリー メニュー コンポーネントを実装する方法

はじめに:
ツリー メニューは一般的なメニュー構造であり、通常はフラットなデータ構造を表示するために使用され、ツリー構造フォームがユーザーに表示されます。 。 uniapp では、コンポーネント開発のアイデアを使用して、開発者がさまざまなプロジェクトで再利用するのに便利なユニバーサル ツリー メニュー コンポーネントを実装できます。この記事では、uniapp にツリー メニュー コンポーネントを実装する方法を紹介し、関連するコード例を示します。

実装手順:
ステップ 1: ツリー メニュー コンポーネントを作成する
まず、uniapp プロジェクトにツリー メニュー コンポーネントを作成し、TreeMenu という名前を付けます。

1.1 コンポーネント ディレクトリに新しいフォルダーを作成し、TreeMenu という名前を付けます。
1.2 TreeMenu ディレクトリに 3 つのファイルを作成します: TreeMenu.vue (コンポーネント本体)、treeMenu.css (コンポーネント スタイル)、index.js (コンポーネント登録)。

ステップ 2: TreeMenu コンポーネントを作成する
次に、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
デフォルトのエクスポート {
プロパティ: {

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

},
メソッド: {

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

}
}
fa53fefa8eafc7c836ea46f2cc284f0d

af920e2e0370c9f68794dd0de75ab64e
.tree-menu {
マージン: 0;
パディング: 0;
}

.tree-menu- item {
パディング左: 20px;
カーソル: ポインタ;
}

.icon {
表示: インラインブロック;
幅: 10px;
高さ: 10px;
マージン右: 5px;
背景色: #000;
}
.icon-open {
背景色: #f00;
}
531ac245ce3e4fe3d50054a55f265927

ステップ 3: TreeMenu コンポーネントを登録する
index.js ファイルで、TreeMenu コンポーネントをグローバル コンポーネントとして登録します。

import Vue from 'vue'
import TreeMenu from './TreeMenu.vue'

Vue.component('TreeMenu', TreeMenu)

ステップ 4: TreeMenu コンポーネントの使用
最後に、ツリー メニューを使用して対応するデータを渡す必要がある TreeMenu コンポーネントを導入します。

7ab6b075cc6c7bcbe15d0b9685c6f1da
dc6dce4a544fdca2df29d5ac0ea9906b

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

16b28748ea4df4d9c2150843fecfba68
3399104e6938bdac11bae5f4688ce7ba

4e07eaec52b67b6abe4024604b22f1f1
デフォルトのエクスポート {
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'
    }
  ]
}

}
}
2cacc6d41bbb37262a98f745aa00fbf0

概要:
上記の手順を通じて、シンプルなツリーメニューコンポーネント。まず、TreeMenu という名前のコンポーネントを作成し、このコンポーネントでツリー メニューの構造と対話ロジックを定義しました。次に、TreeMenu コンポーネントをグローバル コンポーネントとして登録し、プロジェクト内のどこでも使用できるようにします。最後に、ツリー メニューを使用する必要があるページに TreeMenu コンポーネントを導入し、データを渡すことによってメニュー コンテンツを表示します。上記のサンプル コードを通じて、独自のニーズに応じてツリー メニュー コンポーネントをカスタマイズし、それを uniapp に柔軟に適用できます。

以上がuniappでツリーメニューコンポーネントを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。