Développement de composants Vue : méthode d'implémentation du composant de page à onglet

Développement de composants Vue : méthode d'implémentation du composant Tab

Dans les applications Web modernes, l'onglet (Tab) est un composant d'interface utilisateur largement utilisé. Le composant Tab peut afficher plusieurs contenus associés sur une seule page et les changer en cliquant sur l'onglet. Dans cet article, nous présenterons comment utiliser Vue.js pour implémenter un composant d'onglet simple et fournirons des exemples de code détaillés.

La structure du composant onglet Vue

Le composant onglet se compose généralement de deux parties : l'onglet et le panneau. Les étiquettes identifient les panneaux et les panneaux affichent le contenu lié aux étiquettes. Il existe donc une relation un-à-plusieurs entre les étiquettes et les panneaux, chaque étiquette correspondant à un panneau.

Dans Vue, le composant onglet peut être implémenté avec la structure HTML suivante :

<template>
  <div>
    <ul class="tabs">
      <li v-for="(tab, index) in tabs" 
          :key="index" 
          :class="{'active': isActiveTab(index)}" 
          @click="activeTab = index">
        {{ tab.name }}
      </li>
    </ul>
    <div class="panels">
      <slot></slot>
    </div>
  </div>
</template>

Dans cette structure, nous avons une liste contenant plusieurs onglets et un conteneur contenant plusieurs panneaux. Le panneau correspondant à l'onglet sélectionné sera affiché. L'onglet peut être implémenté sous la forme d'un tableau d'objets. Chaque onglet a un attribut name indiquant son nom. La méthode isActiveTab(index) est utilisée pour vérifier si l'onglet est actif lorsque l'on clique sur l'onglet, c'est-à-dire s'il est sélectionné. L'attribut activeTab est utilisé pour stocker l'index de l'onglet actuellement actif.

Ensuite, nous présenterons du code JavaScript requis dans les composants Vue pour contrôler l'interaction entre les étiquettes et les panneaux.

Logique de contrôle du composant onglet Vue

Pour implémenter le composant onglet Vue, nous devons écrire du code JavaScript pour contrôler l'interaction entre l'onglet et le panneau. Voici un exemple simple :

<script>
export default {
  data() {
    return {
      activeTab: 0, // 默认选中第一个标签
      tabs: [], // 存储标签的数组
    };
  },
  methods: {
    isActiveTab(index) {
      return this.activeTab === index;
    },
    addTab(tab) {
      this.tabs.push(tab);
    },
  },
  mounted() {
    this.tabs = this.$children;
  },
};
</script>

Dans ce code JavaScript, nous définissons d'abord les propriétés requises dans les deux composants Vue. L'attribut activeTab est utilisé pour stocker l'index de l'onglet actuellement actif et le tableau tabs est utilisé pour stocker tous les onglets. Ensuite, nous définissons deux méthodes, isActiveTab(index) et addTab(tab).

isActiveTab(index) est utilisé pour déterminer si l'onglet est sélectionné. Si l'index de l'onglet actuel est égal à l'index donné dans le tableau d'onglets, cette méthode renverra True, indiquant que l'onglet actuel est actif. La méthode

addTab(tab) est utilisée pour ajouter un nouvel onglet au tableau d'onglets. Nous pouvons placer le panneau dans l'onglet en utilisant v-slot :

<Tabs>
  <Tab name="Tab1">
    <div>
      <h1 id="Tab-content">Tab 1 content</h1>
    </div>
  </Tab>
  <Tab name="Tab2">
    <div>
      <h1 id="Tab-content">Tab 2 content</h1>
    </div>
  </Tab>
  <Tab name="Tab3">
    <div>
      <h1 id="Tab-content">Tab 3 content</h1>
    </div>
  </Tab>
</Tabs>

Le code ci-dessus définit 3 nouveaux onglets, qui contiennent tous du contenu textuel. Ici, nous pouvons voir comment ajouter des onglets aux emplacements du composant.

Enfin, nous avons ajouté la fonction de hook de cycle de vie Vue montée pour placer tous les onglets enfants dans le tableau d'onglets du composant. Le résultat de ce traitement est que lorsque le composant est monté sur le DOM, nous pouvons passer l'onglet du sous-composant dans le composant Tabs pour ajouter un nouvel onglet utilisant le composant.

Styles pour le composant de l'onglet Vue

Maintenant, nous devons ajouter des styles au composant de l'onglet Vue. Voici un exemple de code CSS simple :

.tabs {
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 0;
  margin: 0;
}

.tabs li {
  padding: 10px;
  background-color: #ececec;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  cursor: pointer;
  border: 1px solid #ccc;
  margin-right: 2px;
}

.tabs li.active {
  background-color: white;
  border-bottom: none;
}

.panels {
  border: 1px solid #ccc;
  padding: 20px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

Dans ce code CSS, nous avons ajouté quelques styles de base pour contrôler l'interaction entre les étiquettes et les panneaux. Plus précisément, nous avons défini une disposition Flex afin que toutes les étiquettes soient disposées horizontalement. Nous avons également ajouté certains styles aux étiquettes tels que la couleur d'arrière-plan, les bordures, l'espacement, les styles du pointeur de la souris, etc.

Pour l'étiquette sélectionnée, nous définissons sa couleur d'arrière-plan sur blanc et éliminons la bordure inférieure. Les panneaux ont également des styles similaires pour afficher le contenu lié à la balise sélectionnée.

Utilisation du composant onglet Vue dans les applications

Maintenant, nous avons appris à utiliser Vue.js pour implémenter un composant onglet simple. Pour que ce composant fonctionne réellement, nous devons l'appliquer à un projet réel.

Supposons que nous ayons un site Web de commerce électronique et que notre page principale ait besoin d'un composant d'onglet pour afficher les produits, les commandes et les informations sur le compte. Nous pouvons créer cette page à l'aide du composant onglet Vue :

<template>
  <div>
    <Tabs>
      <Tab name="Products">
        <!-- 在这里放置商品内容的HTML -->
      </Tab>
      <Tab name="Orders">
        <!-- 在这里放置订单内容的HTML -->
      </Tab>
      <Tab name="Account">
        <!-- 在这里放置账户内容的HTML -->
      </Tab>
    </Tabs>
  </div>
</template>

De cette façon, nous pouvons créer rapidement une page avec plusieurs onglets et les changer facilement. Dans le même temps, lors de la maintenance du code, nous pouvons gérer et modifier plus facilement le code des onglets et des panneaux, améliorant ainsi la lisibilité et la maintenabilité du code.

Résumé

Le composant de l'onglet Vue est l'un des éléments d'interface utilisateur les plus courants dans les applications Web. Afin de créer un composant d'onglet dans Vue.js, nous devons écrire du code HTML, JavaScript et CSS pour celui-ci. Il est important de noter que le composant onglets se compose de deux parties liées : les onglets et les panneaux. Dans Vue.js, nous pouvons facilement ajouter des panneaux aux balises à l'aide de la directive v-slot, créant ainsi une structure de code propre, facile à entretenir et à étendre.

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!