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

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

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

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

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

ステップ 2: TreeMenu コンポーネントを作成する
次に、TreeMenu.vue ファイルでツリー メニュー コンポーネントの特定のコンテンツを定義します。

<script><br>デフォルトのエクスポート {<br> プロパティ: {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>data: { type: Array, default: () =&gt; [] }</pre><div class="contentsignin">ログイン後にコピー</div></div><p>},<br> メソッド: {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>toggleChildren(item) { item.open = !item.open; }</pre><div class="contentsignin">ログイン後にコピー</div></div><p>}<br>}<br></スクリプト></p><p><スタイルスコープ><br>.tree-menu {<br> マージン: 0;<br> パディング: 0;<br>}</p><p>.tree-menu- item {<br> パディング左: 20px;<br> カーソル: ポインタ;<br>}</p><p>.icon {<br> 表示: インラインブロック;<br> 幅: 10px;<br>高さ: 10px;<br> マージン右: 5px;<br> 背景色: #000;<br>}<br>.icon-open {<br> 背景色: #f00;<br>}<br></style></p><p>ステップ 3: TreeMenu コンポーネントを登録する<br>index.js ファイルで、TreeMenu コンポーネントをグローバル コンポーネントとして登録します。 </p><p>import Vue from 'vue'<br>import TreeMenu from './TreeMenu.vue'</p><p>Vue.component('TreeMenu', TreeMenu)</p><p>ステップ 4: TreeMenu コンポーネントの使用<br>最後に、ツリー メニューを使用して対応するデータを渡す必要がある TreeMenu コンポーネントを導入します。 </p><p><テンプレート><br> <div></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;tree-menu :data=&quot;menuData&quot;&gt;&lt;/tree-menu&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div><p></div><br></テンプレート></p><p><スクリプト><br>デフォルトのエクスポート {<br> data() {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>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' } ] }</pre><div class="contentsignin">ログイン後にコピー</div></div><p>}<br>}<br></script>

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

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