Vueでマルチレベル連携メニューを実装するにはどうすればよいですか?-Vue.js-php.cn

Vueでマルチレベル連携メニューを実装するにはどうすればよいですか?

PHPz

リリース： 2023-06-25 19:37:39

オリジナル

2148 人が閲覧しました

Vue.js は人気のあるフロントエンドフレームワークであり、多くの Web サイトが Vue.js を使用してインタラクティブ UI を開発しています。一般的な UI コンポーネントの 1 つは、マルチレベルのカスケードメニュー (カスケードセレクターとも呼ばれます) です。これにより、ユーザーは 1 つのオプションを選択して別のオプションのリストをフィルターできるようになり、より詳細な検索またはナビゲーション機能が可能になります。この記事では、Vue.jsを使って多階層連携メニューを実装する方法を紹介します。

準備

始める前に、Vue.js がインストールされていることを確認する必要があります。 npm または Vue.js の公式 CDN を使用してインストールできます。すでに Vue.js アプリケーションがあり、マルチレベルのリンケージメニューコンポーネントを追加する必要があるとします。

マルチレベル連携メニューコンポーネントの作成

単純なマルチレベル連携メニューを実装するために、単一ファイルコンポーネント CascadingMenu.vue を作成します。コンポーネントのテンプレートでは、Vue.js の v-for ディレクティブを使用して各オプションのリストをレンダリングし、v-model を使用してオプションの値をユーザーが選択した値にバインドします。ユーザーがオプションを選択したら、サブメニューのオプションリストを更新して表示する必要があります。

<template>
  <div class="cascading-menu">
    <select v-model="selectedOption">
      <option value="">请选择</option>
      <option v-for="option in options" :value="option">{{ option.label }}</option>
    </select>
    <cascading-menu v-if="hasChildren" :options="selectedOption.children" />
  </div>
</template>

<script>
export default {
  name: 'CascadingMenu',
  props: {
    options: {
      type: Array,
      default: () => [],
      required: true
    },
    selectedValue: {
      default: null,
      required: false
    }
  },
  data() {
    return {
      selectedOption: this.selectedValue,
      hasChildren: false
    };
  },
  watch: {
    selectedOption() {
      this.hasChildren = this.selectedOption.children.length > 0;
    }
  }
};
</script>

ログイン後にコピー

これで、各オプションを表示し、ユーザーが選択した値を selectedOption にバインドできる、単純なマルチレベルのリンケージメニューコンポーネントが作成されました。

データの追加

マルチレベル連携メニューを実装する前に、ユーザーが選択できるオプションをシミュレートするためのデータを準備する必要があります。以下に示すように、オブジェクトの単純な配列を使用して、各オプションとそのサブメニューを表すことができます。

data() {
    return {
      options: [
        {
          label: '选项1',
          children: [
            {
              label: '选项1-1',
              children: [
                { label: '选项1-1-1', children: [] },
                { label: '选项1-1-2', children: [] },
                { label: '选项1-1-3', children: [] }
              ]
            },
            {
              label: '选项1-2',
              children: [{ label: '选项1-2-1', children: [] }]
            }
          ]
        },
        {
          label: '选项2',
          children: [
            {
              label: '选项2-1',
              children: [
                { label: '选项2-1-1', children: [] },
                { label: '选项2-1-2', children: [] },
                { label: '选项2-1-3', children: [] }
              ]
            },
            {
              label: '选项2-2',
              children: [{ label: '选项2-2-1', children: [] }]
            }
          ]
        }
      ]
    };
  }

ログイン後にコピー

各オプションには label 属性と Children 属性があり、Children 属性はサブメニューのオプション (存在する場合) を表します。

マルチレベル連携メニューの実装

マルチレベル連携メニューコンポーネントを作成し、データを準備しました。次に、それらを結合し、再帰コンポーネントを使用する必要があります。多階層連携メニューを実装します。 App.vue ファイルに cascading-menu コンポーネントを含めて、それにオプションデータを props として渡すことができます。カスケードメニューコンポーネント内では、それ自体を再帰的に呼び出してすべてのサブメニューを表示し、マルチレベルのリンクメニューを実現します。

<template>
  <div class="app">
    <cascading-menu :options="options" />
  </div>
</template>

<script>
import CascadingMenu from './components/CascadingMenu';

export default {
  name: 'App',
  components: {
    CascadingMenu
  },
  data() {
    return {
      options: [
        {
          label: '选项1',
          children: [
            {
              label: '选项1-1',
              children: [
                { label: '选项1-1-1', children: [] },
                { label: '选项1-1-2', children: [] },
                { label: '选项1-1-3', children: [] }
              ]
            },
            {
              label: '选项1-2',
              children: [{ label: '选项1-2-1', children: [] }]
            }
          ]
        },
        {
          label: '选项2',
          children: [
            {
              label: '选项2-1',
              children: [
                { label: '选项2-1-1', children: [] },
                { label: '选项2-1-2', children: [] },
                { label: '选项2-1-3', children: [] }
              ]
            },
            {
              label: '选项2-2',
              children: [{ label: '选项2-2-1', children: [] }]
            }
          ]
        }
      ]
    };
  }
};
</script>

ログイン後にコピー

これで、シンプルなマルチレベルのリンクメニューが実装されました。ユーザーはオプションの 1 つをクリックして、そのサブメニューを表示できます。各サブメニューについて、cascading-menu コンポーネントを再帰的に呼び出すことで、すべてのサブメニューのオプションを表示できます。

概要

この記事では、Vue.js を使用してマルチレベルのリンクメニューを実装する方法を学びました。シンプルなカスケードメニューコンポーネントを作成し、それ自体への再帰呼び出しを使用してマルチレベルのカスケードメニューを実装しました。データを準備して操作することで、各オプションをレンダリングし、v-model を利用してオプションの値をユーザーが選択した値にバインドする方法を示します。この記事が、Vue.js の使用法をより深く理解し、より強力な UI コンポーネントを作成するのに役立つことを願っています。

以上がVueでマルチレベル連携メニューを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。