Comment implémenter des composants d'onglets et des pages multi-onglets dans Vue ?

Avec la mise à jour continue de la technologie front-end, Vue, en tant que framework front-end populaire, est devenu le premier choix de nombreux développeurs. Dans les projets réels, il est souvent nécessaire d'utiliser des composants à onglets et des pages multi-onglets pour basculer et gérer différents modules fonctionnels. Dans cet article, nous présenterons comment utiliser Vue pour implémenter un composant à onglets simples et une page multi-onglets.

1. Implémenter un composant onglet simple

1. Créer le composant Tab.vue

Créer un dans le projet Un composant de Tab.vue, utilisé pour afficher la liste des onglets et le contenu de la page à onglet actuellement sélectionnée.

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

Dans ce composant, nous utilisons la directive v-for pour parcourir le tableau d'onglets entrants et restituer le titre de chaque onglet dans un élément d'onglet. Le currentIndex de la page à onglet sélectionnée ajoutera une classe active à l'élément d'onglet pour mettre en surbrillance la page à onglet actuellement sélectionnée. Le composant onglet possède son propre emplacement, qui est utilisé pour afficher le contenu de la page à onglet.

2. Utilisez le composant Tab dans le composant parent

Sur la page où le composant Tab doit être utilisé, importez le composant Tab et utilisez dans le modèle, transmettez la page à onglet à afficher au composant Tab en tant que membre du tableau tabs et spécifiez l'indice de la page à onglet actuellement sélectionnée via l'attribut currentIndex. De plus, écoutez l'événement tabchange dans le composant Tab pour modifier la valeur de currentIndex dans le composant parent afin de contrôler la page à onglet actuellement sélectionnée.

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

Dans ce composant parent, nous devons d'abord importer le composant Tab, puis créer le tableau tabs pour stocker le titre et le contenu de chaque page à onglet. Deux propriétés, tabs et currentIndex, doivent être transmises dans le modèle pour initialiser respectivement le composant Tab. Dans la méthode handleChange, nous écoutons l'événement tabchange, afin que la valeur de currentIndex puisse être mise à jour dans le composant parent pour sélectionner différentes pages à onglet.

2. Implémenter des composants de page multi-onglets

1. Créer une mise en page et une configuration de routage

Créez-en une dans le projet Pour les pages dotées de fonctionnalités multi-onglets, vous devez d'abord considérer la mise en page de la page. Dans cet article, nous utilisons le composant Layout d'Element UI pour créer l'infrastructure de page, puis complétons la configuration du routage via Vue Router. Dans un scénario multi-onglets, chaque page à onglet peut être considérée comme une page de routage, les informations de routage correspondantes doivent donc être ajoutées à la table de routage.

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

Dans le composant parent PageLayout.vue, nous définissons d'abord le titre de la page pageTitle, la liste de menus menuList et les deux valeurs d'état activeMenu et isCollapse pour l'expansion et la fermeture du menu. Ensuite, le composant Layout d'Element UI est utilisé pour construire la structure de base de la page, avec la barre de menu à gauche et le contenu de l'onglet à droite. Dans le composant de menu el-menu, nous rendons les groupes de menu et les éléments de menu via la boucle v-for. Les éléments de menu sont liés aux chemins de routage correspondants. Lorsque vous cliquez sur les éléments de menu, la méthode handleSelect est déclenchée et le chemin de routage. est passé dans $router. Accédez à la page correspondante dans la méthode push. Dans ce composant, nous devons utiliser router-view pour afficher le composant de routage correspondant.

2. Implémentation du composant Tab et de la fonction de page multi-onglets

Après avoir terminé la mise en page et la configuration du routage, nous devons implémenter le composant onglet et la fonction page multi-onglets dans la fonction page Multi-onglets, et écrivez le code js correspondant. Dans la fonction multi-onglets, vous devez d'abord implémenter le composant de barre d'onglets TabBar.vue, qui permet d'afficher le titre de chaque onglet et de contrôler l'ajout et la suppression d'onglets.

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

Dans ce composant, nous rendons le titre de chaque onglet sous forme d'élément d'onglet en utilisant une boucle v-for pour restituer le tableau d'onglets entrants. La page à onglet sélectionnée ajoutera une classe active à l'élément d'onglet pour mettre en surbrillance la page à onglet actuellement sélectionnée. Le composant tab-bar est livré avec trois événements : tabchange est utilisé pour écouter les événements de changement d'onglet, et addtab et removetab sont utilisés pour écouter les événements d'ajout et de suppression d'onglets afin de mettre à jour la valeur du tableau tabs dans le composant parent.

Dans le composant parent PageLayout.vue, nous devons ajouter le composant TabBar sous la structure de la page, transmettre les propriétés tabs et currentIndex, puis mettre à jour le tableau tabs dans la méthode événementielle correspondante afin qu'Operate la page à onglet correspondante.

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

Dans PageLayout.vue, nous avons d'abord créé le tableau d'onglets pour stocker les informations de routage de chaque page à onglet. Dans la fonction hook créée, nous écoutons les changements dans la route actuelle et trouvons la route de tabulation correspondante dans le tableau tabs. S'il existe, accédez directement à l'onglet correspondant, sinon ajoutez l'itinéraire actuel comme nouvel onglet. Dans la méthode handleAddTab, si l'onglet correspondant à la route actuelle existe déjà, sélectionnez directement l'onglet existant, sinon ajoutez un nouvel onglet au tableau tabs. Dans la méthode handleRemoveTab, nous utilisons la méthode splice du tableau pour supprimer l'onglet existant, localiser l'onglet actuellement sélectionné dans le tableau tabs et mettre à jour les informations de saut de currentIndex et $router.

3.Résumé

Dans cet article, nous expliquons comment utiliser le framework Vue et les plug-ins associés pour implémenter le composant onglet et la fonctionnalité multi-onglets. Au cours du processus de mise en œuvre proprement dit, les composants ou les codes doivent être ajustés de manière flexible en fonction de scénarios spécifiques afin de mieux s'adapter aux besoins réels du projet. En général, le composant onglets et la fonction multi-onglets peuvent offrir une meilleure convivialité et une meilleure expérience utilisateur pour le projet, et mieux résoudre les problèmes architecturaux de la page frontale.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!