Wie implementiert man Tab-Komponenten und Multi-Tab-Seiten in Vue?

Mit der kontinuierlichen Aktualisierung der Front-End-Technologie ist Vue als beliebtes Front-End-Framework zur ersten Wahl vieler Entwickler geworden. In tatsächlichen Projekten ist es häufig erforderlich, Registerkartenkomponenten und Seiten mit mehreren Registerkarten zu verwenden, um verschiedene Funktionsmodule zu wechseln und zu verwalten. In diesem Artikel stellen wir vor, wie Sie mit Vue eine einfache Tab-Komponente und eine Seite mit mehreren Tabs implementieren.

1. Implementieren Sie eine einfache Tab-Komponente.

1. Erstellen Sie die Tab.vue-Komponente.

Erstellen Sie eine Tab.vue-Komponente im Projekt, um die Tab-Liste und den Inhalt der aktuell ausgewählten Tab-Seite anzuzeigen.

<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>

In dieser Komponente rendern wir den Titel jedes Tabs in ein Tab-Element, indem wir die v-for-Direktive verwenden, um das eingehende Tabs-Array zu durchlaufen. Der currentIndex der ausgewählten Registerkartenseite fügt dem Tab-Element eine aktive Klasse hinzu, um die aktuell ausgewählte Registerkartenseite hervorzuheben. Die Tab-Komponente verfügt über einen eigenen Slot-Slot, der zur Anzeige des Inhalts der Tab-Seite verwendet wird.

2. Verwenden Sie die Tab-Komponente in der übergeordneten Komponente.

Importieren Sie auf der Seite, die die Tab-Komponente verwenden muss, die Tab-Komponente, verwenden Sie sie in der Vorlage und übergeben Sie die anzuzeigende Tab-Seite an die Tab-Komponente als Mitglied des Tabs-Arrays und geben Sie den Index der aktuell ausgewählten Tab-Seite über das Attribut currentIndex an. Hören Sie außerdem auf das Ereignis tabchange in der Tab-Komponente, um den Wert von currentIndex in der übergeordneten Komponente zu ändern und so die aktuell ausgewählte Registerkartenseite zu steuern.

<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>

In dieser übergeordneten Komponente müssen wir zuerst die Tab-Komponente importieren und dann das Tabs-Array erstellen, um den Titel und den Inhalt jeder Tab-Seite zu speichern. Zwei Eigenschaften, tabs und currentIndex, müssen in der Vorlage übergeben werden, um die Tab-Komponente jeweils zu initialisieren. In der handleChange-Methode hören wir auf das Tabchange-Ereignis, sodass der Wert von currentIndex in der übergeordneten Komponente aktualisiert werden kann, um verschiedene Registerkartenseiten auszuwählen.

2. Multi-Tab-Komponente implementieren

1. Seitenlayout und Routing-Konfiguration erstellen

Um eine Seite mit Multi-Tab-Funktion im Projekt zu erstellen, müssen Sie zunächst das Layout der Seite berücksichtigen. In diesem Artikel verwenden wir die Layout-Komponente von Element UI, um die Seiteninfrastruktur aufzubauen und schließen dann die Routing-Konfiguration über Vue Router ab. In einem Szenario mit mehreren Registerkarten kann jede Registerkarte als Routing-Seite betrachtet werden, sodass entsprechende Routing-Informationen zur Routing-Tabelle hinzugefügt werden müssen.

<template>
  <div class="page-container">
    <el-container>
      <el-header>
        <h1>{{ 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>

In der übergeordneten Komponente PageLayout.vue setzen wir zunächst den Seitentitel pageTitle, die Menüliste menuList und die beiden Statuswerte activeMenu und isCollapse für das Erweitern und Schließen des Menüs. Dann wird die Layout-Komponente von Element UI verwendet, um die Grundstruktur der Seite zu erstellen, mit der Menüleiste auf der linken Seite und dem Tab-Inhalt auf der rechten Seite. In der Menükomponente el-menu rendern wir die Menügruppen und Menüelemente über die v-for-Schleife. Die Menüelemente werden an die entsprechenden Routing-Pfade gebunden. Wenn auf die Menüelemente geklickt wird, wird die handleSelect-Methode ausgelöst und der Routing-Pfad festgelegt wird an $router übergeben. Springt zur entsprechenden Seite in der Push-Methode. In dieser Komponente müssen wir die Router-Ansicht verwenden, um die entsprechende Routing-Komponente anzuzeigen.

2. Implementieren Sie die Tab-Komponente und die Multi-Tab-Funktion

Nachdem wir das Seitenlayout und die Routing-Konfiguration abgeschlossen haben, müssen wir die Tab-Komponente und die Multi-Tab-Funktion auf der Seite implementieren und den entsprechenden JS-Code schreiben. In der Funktion mit mehreren Registerkarten müssen Sie zunächst die Registerkartenleistenkomponente TabBar.vue implementieren, mit der der Titel jeder Registerkarte angezeigt und das Hinzufügen und Löschen von Registerkarten gesteuert wird.

<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>

In dieser Komponente rendern wir den Titel jedes Tabs als Tab-Element, indem wir eine V-for-Schleife verwenden, um das eingehende Tabs-Array zu rendern. Die ausgewählte Registerkartenseite fügt dem Registerkartenelement eine aktive Klasse hinzu, um die aktuell ausgewählte Registerkartenseite hervorzuheben. Die Tab-Bar-Komponente verfügt über drei Ereignisse: Tabchange wird verwendet, um auf Tab-Wechselereignisse zu warten, addtab und Removetab werden verwendet, um auf Tab-Hinzufügungs- und -Entfernungsereignisse zu warten, um den Wert des Tabs-Arrays in der übergeordneten Komponente zu aktualisieren.

In der übergeordneten Komponente PageLayout.vue müssen wir die TabBar-Komponente unterhalb der Seitenstruktur hinzufügen, die Eigenschaften tabs und currentIndex übergeben und dann das tabs-Array in der entsprechenden Ereignismethode aktualisieren, um die entsprechende Tab-Seite zu bedienen.

<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>

In PageLayout.vue haben wir zunächst das Tabs-Array erstellt, um die Routing-Informationen jeder Tab-Seite zu speichern. In der erstellten Hook-Funktion achten wir auf Änderungen in der aktuellen Route und finden die entsprechende Tab-Route im Tabs-Array. Wenn vorhanden, navigieren Sie direkt zum entsprechenden Tab, andernfalls fügen Sie die aktuelle Route als neuen Tab hinzu. Wenn in der handleAddTab-Methode die Registerkarte, die der aktuellen Route entspricht, bereits vorhanden ist, wählen Sie die vorhandene Registerkarte direkt aus, andernfalls fügen Sie eine neue Registerkarte zum Tabs-Array hinzu. In der Methode handleRemoveTab verwenden wir die Splice-Methode des Arrays, um die vorhandene Registerkarte zu löschen, die aktuell ausgewählte Registerkarte im Tabs-Array zu suchen und die Sprunginformationen von currentIndex und $router zu aktualisieren.

3. Zusammenfassung

In diesem Artikel stellen wir vor, wie Sie das Vue-Framework und zugehörige Plug-Ins verwenden, um die Tab-Komponente und die Multi-Tab-Funktionalität zu implementieren. Während des eigentlichen Implementierungsprozesses müssen Komponenten oder Codes flexibel an bestimmte Szenarien angepasst werden, um sich besser an die tatsächlichen Projektanforderungen anzupassen. Im Allgemeinen können die Tab-Komponente und die Multi-Tab-Funktion eine bessere Benutzerfreundlichkeit und Benutzererfahrung für das Projekt bieten und die Architekturprobleme der Front-End-Seite besser lösen.

Das obige ist der detaillierte Inhalt vonWie implementiert man Tab-Komponenten und Multi-Tab-Seiten in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!