Vue でタブ コンポーネントとマルチタブ ページを実装するにはどうすればよいですか?

フロントエンド テクノロジの継続的な更新により、Vue は人気のあるフロントエンド フレームワークとして、多くの開発者の最初の選択肢になりました。実際のプロジェクトでは、さまざまな機能モジュールを切り替えて管理するために、タブ コンポーネントやマルチタブ ページを使用する必要があることがよくあります。この記事では、Vueを使ってシンプルなタブコンポーネントとマルチタブページを実装する方法を紹介します。

1. 単純なタブ コンポーネントの実装

1. Tab.vue コンポーネントの作成

タブを表示するプロジェクトに Tab.vue コンポーネントを作成します。リストと現在選択されているタブ ページの内容。

<template>
  <div>
    <div class="tab-header">
      <div class="tab-item" 
           v-for="(tab, index) in tabs" 
           :key="index"
           :class="{ active: index === currentIndex }" 
           @click="handleTab(index)">
        {{ tab.title }}
      </div>
    </div>
    <div class="tab-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Tab',
  props: {
    tabs: {
      type: Array,
      required: true,
    },
    currentIndex: {
      type: Number,
      default: 0,
    },
  },
  methods: {
    handleTab(index) {
      this.$emit('tabchange', index);
    },
  },
};
</script>

このコンポーネントでは、v-for ディレクティブを使用して、受信タブ配列を反復処理し、各タブのタイトルをタブ項目としてレンダリングします。選択したタブ ページの currentIndex は、アクティブ クラスをタブ項目に追加して、現在選択されているタブ ページを強調表示します。タブ コンポーネントには、タブ ページのコンテンツを表示するために使用される独自のスロットがあります。

2. 親コンポーネントで Tab コンポーネントを使用する

タブ コンポーネントを使用する必要があるページで、Tab コンポーネントをインポートし、表示するテンプレートで使用します。タブ ページは tabs 配列のメンバーとして Tab コンポーネントに渡され、現在選択されているタブ ページのインデックスは currentIndex プロパティを通じて指定されます。さらに、Tab コンポーネントの tabchange イベントをリッスンして、親コンポーネントの currentIndex の値を変更し、現在選択されているタブ ページを制御します。

<template>
  <div>
    <Tab :tabs="tabs" :currentIndex="currentIndex" @tabchange="handleChange">
      <div v-for="(tab, index) in tabs" :key="index">
        {{ tab.content }}
      </div>
    </Tab>
  </div>
</template>

<script>
import Tab from './Tab.vue';

export default {
  name: 'App',
  components: {
    Tab,
  },
  data() {
    return {
      currentIndex: 0,
      tabs: [
        {
          title: 'tab1',
          content: '这是第一个 tab 页的内容',
        },
        {
          title: 'tab2',
          content: '这是第二个 tab 页的内容',
        },
      ],
    };
  },
  methods: {
    handleChange(index) {
      this.currentIndex = index;
    },
  },
};
</script>

この親コンポーネントでは、まず Tab コンポーネントをインポートし、次に各タブ ページのタイトルとコンテンツを保存するための tabs 配列を作成する必要があります。 Tab コンポーネントを初期化するには、tab と currentIndex の 2 つのプロパティをそれぞれテンプレートに渡す必要があります。 handleChange メソッドでは、tabchange イベントをリッスンして、親コンポーネントで currentIndex の値を更新して、別のタブ ページを選択できるようにします。

2. マルチタブコンポーネントの実装

1. ページレイアウトとルーティング設定の作成

プロジェクト内にマルチタブ機能を備えたページを作成します。ページのレイアウトを考慮する必要があります。この記事では、Element UI の Layout コンポーネントを使用してページ インフラストラクチャを構築し、Vue Router を介してルーティング設定を完了します。マルチタブのシナリオでは、各タブ ページはルーティング ページと見なされるため、対応するルーティング情報をルーティング テーブルに追加する必要があります。

<template>
  <div class="page-container">
    <el-container>
      <el-header>
        <h1 id="pageTitle">{{ pageTitle }}</h1>
      </el-header>
      <el-container>
        <el-aside style="width: 200px; height: 100%">
          <el-menu
            :default-active="activeMenu"
            @select="handleSelect"
            unique-opened
            :collapse="isCollapse">
            <el-submenu v-for="menuGroup in menuList" :key="menuGroup.name" :index="menuGroup.name">
              <template slot="title">
                <i :class="menuGroup.icon"></i>
                <span>{{ menuGroup.title }}</span>
              </template>
              <el-menu-item v-for="menuItem in menuGroup.children" :key="menuItem.path" :index="menuItem.path">
                <i :class="menuItem.icon"></i>
                <span slot="title">{{ menuItem.title }}</span>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'PageLayout',
  data() {
    return {
      pageTitle: '多标签页示例',
      menuList: [
        {
          name: 'group1',
          title: '分组 1',
          icon: 'el-icon-s-home',
          children: [
            {
              title: '页面 1',
              path: '/page1',
              icon: 'el-icon-s-order',
            },
            {
              title: '页面 2',
              path: '/page2',
              icon: 'el-icon-s-data',
            },
          ],
        },
        {
          name: 'group2',
          title: '分组 2',
          icon: 'el-icon-s-management',
          children: [
            {
              title: '页面 3',
              path: '/page3',
              icon: 'el-icon-s-flag',
            },
            {
              title: '页面 4',
              path: '/page4',
              icon: 'el-icon-menu',
            },
          ],
        },
      ],
      activeMenu: '',
      isCollapse: false,
    };
  },
  methods: {
    handleSelect(index) {
      this.activeMenu = index;
      this.$router.push(index);
    },
  },
};
</script>

親コンポーネント PageLayout.vue では、最初にページ タイトル pageTitle、メニュー リスト menuList、およびメニューの展開と閉じるための 2 つのステータス値 activeMenu と isCollapse を設定します。次に、Element UI の Layout コンポーネントを使用して、左側にメニュー バー、右側にタブ コンテンツというページの基本構造を構築します。メニュー コンポーネント el-menu では、v-for ループを通じてメニュー グループとメニュー項目をレンダリングします。メニュー項目は、対応するルーティング パスにバインドされます。メニュー項目がクリックされると、handleSelect メソッドがトリガーされ、ルーティング パスが$routerに渡されるので、pushメソッドで該当ページにジャンプします。このコンポーネントでは、router-view を使用して、対応するルーティング コンポーネントを表示する必要があります。

2. タブ コンポーネントとマルチタブ関数の実装

ページ レイアウトとルーティング設定が完了したら、タブ コンポーネントとマルチタブ関数をページに移動し、対応する js コードを記述します。マルチタブ機能では、まずタブ バー コンポーネント TabBar.vue を実装する必要があります。これは、各タブのタイトルを表示し、タブの追加と削除を制御するために使用されます。

<template>
  <div class="tab-bar" :class="{ fixed: isFixed }">
    <div class="tab-bar-content">
      <div v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{ active: currentIndex === index }" @click="handleChange(index)">
        {{ tab.title }}
        <i class="el-icon-close" @click.stop="handleRemoveTab(index)"></i>
      </div>
      <i class="el-icon-circle-plus add-tab-btn" @click.stop="handleAddTab"></i>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TabBar',
  props: {
    tabs: {
      type: Array,
      required: true,
    },
    currentIndex: {
      type: Number,
      default: 0,
    },
    isFixed: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    handleChange(index) {
      this.$emit('tabchange', index);
    },
    handleAddTab() {
      this.$emit('addtab');
    },
    handleRemoveTab(index) {
      this.$emit('removetab', index);
    },
  },
};
</script>

このコンポーネントでは、v-for ループを使用して受信タブ配列をレンダリングすることにより、各タブのタイトルをタブ項目としてレンダリングします。選択したタブ ページでは、アクティブなクラスがタブ項目に追加され、現在選択されているタブ ページが強調表示されます。タブバーコンポーネントには 3 つのイベントが付属しています。tabchange はタブ切り替えイベントをリッスンするために使用され、addtab とremovetab はタブの追加および削除イベントをリッスンして、親コンポーネント内のタブ配列の値を更新するために使用されます。

親コンポーネント PageLayout.vue では、ページ構造の下に TabBar コンポーネントを追加し、タブと currentIndex プロパティを渡し、対応するイベント メソッドでタブ配列を更新して、操作ができるようにする必要があります。対応するタブページ。

<template>
  <div class="page-container">
    ...
    <el-main>
      <tab-bar :tabs="tabs" :currentIndex="currentIndex" :isFixed="isFixed" @tabchange="handleChange" @addtab="handleAddTab" @removetab="handleRemoveTab"/>
      <router-view v-if="$route.meta.keepAlive"/>
      <keep-alive>
        <router-view v-if="!$route.meta.keepAlive"/>
      </keep-alive>
    </el-main>
  </div>
</template>

<script>
import TabBar from '../components/TabBar.vue';

export default {
  name: 'PageLayout',
  components: {
    TabBar,
  },
  data() {
    return {
      tabs: [
        {
          title: '首页',
          path: '/',
        },
      ],
      currentIndex: 0,
      isFixed: false,
    };
  },
  created() {
    this.$router.afterEach((to, from) => {
      const index = this.tabs.findIndex(tab => tab.path === to.path);
      if (index !== -1) {
        this.currentIndex = index;
        this.isFixed = false;
      } else {
        this.addTab(to);
      }
    });
  },
  methods: {
    handleChange(index) {
      this.$router.push(this.tabs[index].path);
    },
    handleAddTab() {
      const isExist = this.tabs.find(tab => tab.path === this.$route.path);
      if (!isExist) {
        this.tabs.push({
          title: this.$route.meta.title || '',
          path: this.$route.path,
        });
        this.currentIndex = this.tabs.length - 1;
        this.isFixed = false;
      } else {
        this.currentIndex = this.tabs.indexOf(isExist);
        this.isFixed = false;
      }
      this.$router.push(this.$route.path);
    },
    handleRemoveTab(index) {
      const targetTab = this.tabs[index];
      const targetPath = targetTab.path;
      this.tabs.splice(index, 1);
      if (targetPath === this.$route.path) {
        const lastIndex = this.tabs.length - 1;
        const lastTab = this.tabs[lastIndex];
        this.currentIndex = lastIndex;
        this.$router.push(lastTab.path);
      } else {
        this.currentIndex = this.tabs.findIndex(tab => tab.path === this.$route.path);
      }
    },
  },
};
</script>

PageLayout.vue では、最初に各タブ ページのルーティング情報を保存するタブ配列を作成しました。作成されたフック関数では、現在のルートの変更をリッスンし、対応するタブ ルートを tabs 配列で見つけます。存在する場合は、対応するタブに直接移動します。存在しない場合は、現在のルートを新しいタブとして追加します。 handleAddTab メソッドでは、現在のルートに対応するタブがすでに存在する場合は、既存のタブを直接選択します。そうでない場合は、新しいタブを tabs 配列に追加します。 handleRemoveTab メソッドでは、配列の splice メソッドを使用して既存のタブを削除し、tabs 配列内で現在選択されているタブを見つけて、currentIndex と $router のジャンプ情報を更新します。

3. 概要

この記事では、Vue フレームワークと関連プラグインを使用してタブ コンポーネントとマルチタブ ページ機能を実装する方法を紹介します。実際の実装プロセスでは、実際のプロジェクトのニーズによりよく適応するために、コンポーネントまたはコードを特定のシナリオに従って柔軟に調整する必要があります。一般に、タブ コンポーネントとマルチタブ機能は、プロジェクトの使いやすさとユーザー エクスペリエンスを向上させ、フロントエンド ページのアーキテクチャ上の問題をより適切に解決します。

以上がVue でタブ コンポーネントとマルチタブ ページを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。