Vue 中如何實作 tab 元件及多標籤頁？

隨著前端技術的不斷更新，Vue 作為一個流行的前端框架，已經成為許多開發者的首選。在實際專案中，常常需要使用 tab 元件以及多標籤頁來實現不同功能模組的切換和管理。在本文中，我們將介紹如何利用 Vue 實作一個簡單的 tab 元件以及多標籤頁。

一、實作一個簡單的tab 元件

1. 建立Tab.vue 元件

在專案中建立一個Tab.vue 的元件，用於顯示tab 清單和目前選取的tab 頁的內容。

<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 指令來遍歷傳入的 tabs 數組，將每個 tab 的標題渲染為一個 tab-item。選取的 tab 頁的 currentIndex 會在 tab-item 上新增 active class，以便高亮顯示目前選取的 tab 頁。 tab 元件附有 slot 插槽，用於顯示 tab 頁內容。

2. 在父元件中使用Tab 元件

在需要使用tab 元件的頁面上，將Tab 元件匯入後在template 中使用，將需要展示的tab頁作為tabs 陣列的成員傳入至Tab 元件中，並透過currentIndex 屬性指定目前選取的tab 頁的下標。此外，在 Tab 元件中監聽 tabchange 事件，以便在父元件中變更 currentIndex 的值來控制目前選取的 tab 頁。

<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 頁的標題和內容。在 template 需要傳入 tabs 和 currentIndex 兩個屬性，分別用於初始化 Tab 元件。在 handleChange 方法中，我們監聽了 tabchange 事件，從而可以在父元件中更新 currentIndex 的值，來實現選取不同的 tab 頁。

二、實作多標籤頁元件

1. 建立頁面佈局及路由配置

在專案中建立一個具有多標籤頁功能的頁面，首先需要考慮頁面的佈局。在本文中，我們使用了 Element UI 的 Layout 佈局元件來建立頁面基礎結構，然後透過 Vue Router 來完成路由設定。在多標籤頁場景下，每個 tab 頁可視為路由頁面，因此需要在路由表中新增對應路由資訊。

<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 和兩個狀態值 activeMenu 和 isCollapse，用於選單的展開與關閉。接著利用 Element UI 的 Layout 元件建立了頁面的基本結構，左側為選單欄，右側為標籤頁內容。在選單元件el-menu 中，我們透過v-for 循環渲染了選單分組和選單項，其中選單項目綁定了對應的路由path，點擊選單項目後會觸發handleSelect 方法，將路由path 傳入$router. push 方法中跳轉至對應頁面。在該元件中我們需要使用 router-view 去展示對應的路由元件。

2. 實作Tab 元件及多標籤頁功能

在完成頁面佈局和路由配置後，我們需要在頁面中實作tab 元件及多標籤頁功能，並書寫對應的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 迴圈來渲染傳入的 tabs 數組，將每個 tab 的標題渲染為一個 tab-item。選取的 tab 頁面會在 tab-item 上新增 active class，以便高亮顯示目前選取的 tab 頁。 tab-bar 元件自帶三個事件：tabchange 用於監聽 tab 切換事件，addtab 和 removetab 用於監聽 tab 新增和刪除事件，以便在父元件中更新 tabs 陣列的值。

在父元件PageLayout.vue 中，我們需要在頁面結構下方新增TabBar 元件，並為其傳入tabs 和currentIndex 屬性，然後在對應事件方法中對tabs 陣列進行更新操作，以便操作對應的標籤頁。

<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 數組，用於儲存各個標籤頁的路由資訊。在 created 鉤子函數中，我們監聽了目前路由的變化，並在 tabs 陣列中尋找對應的標籤頁路由。如果存在，則直接定位到對應的標籤頁，否則將目前路由新增為新的標籤頁。在 handleAddTab 方法中，如果目前路由對應的標籤頁已存在，則直接選取已有標籤頁，否則在 tabs 陣列中加入新的標籤頁。在 handleRemoveTab 方法中，我們利用陣列的 splice 方法對已有標籤頁進行刪除操作，並在 tabs 陣列中定位到目前選取的標籤頁，並更新 currentIndex 和 $router 的跳躍資訊。

三、總結

在本文中，我們介紹如何利用 Vue 框架及相關外掛程式實作 tab 元件及多標籤頁功能。實際實作過程中，需要根據具體場景對元件或程式碼進行彈性調整，以便更好地適應實際專案需求。總的來說，tab 元件和多標籤頁功能可以為專案提供更好的可用性和使用者體驗，更好的解決前端頁面的架構問題。

以上是Vue 中如何實作 tab 元件及多標籤頁？的詳細內容。更多資訊請關注PHP中文網其他相關文章！