vue définit l'effet de sélection des onglets

Avec le développement continu de la technologie Web frontale, de plus en plus de sites Web et d'applications commencent désormais à utiliser des frameworks JavaScript populaires pour créer des interfaces interactives frontales. Vue.js est actuellement un framework JavaScript populaire. Il adopte le modèle d'architecture MVVM, qui peut améliorer efficacement l'efficacité du développement et la maintenabilité des applications Web.

Dans les applications Vue.js, vous rencontrez souvent des situations où vous devez utiliser la fonction Tab, telles que le changement d'onglet, les étiquettes de navigation, etc. Dans le composant Tab, nous souhaitons souvent définir l'effet de sélection pour améliorer l'expérience interactive. Cet article expliquera comment utiliser Vue.js pour réaliser cette fonction.

1. Créez un composant Tab à l'aide de Vue.js

Tout d'abord, nous devons créer un composant Tab dans Vue.js. Le composant Tab peut être divisé en deux parties : navigation par onglets et zone de contenu de l'onglet.

1.1 Créer une navigation par onglets

Tout d'abord, nous devons définir la structure HTML de la navigation par onglets dans le modèle du composant. Dans Vue.js, vous pouvez utiliser la directive v-for pour parcourir un tableau et la directive v-bind pour lier la valeur de l'élément du tableau à l'attribut de l'élément HTML.

<template>
  <div class="tab">
    <ul class="tab-nav">
      <li v-for="(item, index) in tabs"
          :key="index"
          :class="{ 'active': index === currentIndex }"
          @click="handleClick(index)">
        {{ item }}
      </li>
    </ul>
    <div class="tab-content">
      <slot></slot>
    </div>
  </div>
</template>

Dans le code ci-dessus, nous avons défini un tableau nommé "onglets" pour stocker les titres des onglets dans la navigation par onglets. Utilisez la commande v-for pour parcourir le tableau et afficher chaque titre d'onglet en tant qu'élément li. Nous utilisons la directive :class pour ajouter le nom de la classe active afin d'obtenir l'effet de sélection. En même temps, nous utilisons la directive @click pour lier l'événement click Lorsque l'utilisateur clique sur un onglet, la méthode handleClick est déclenchée.

1.2 Créer une zone de contenu d'onglet

Dans la zone de contenu d'onglet, nous pouvons utiliser le mécanisme de slot de Vue.js pour y parvenir. Plus précisément, nous définissons un emplacement nommé TabContent dans le composant et utilisons l'emplacement dans la zone de contenu de l'onglet.

<template>
  <div class="tab">
    <ul class="tab-nav">
      <li v-for="(item, index) in tabs"
          :key="index"
          :class="{ 'active': index === currentIndex }"
          @click="handleClick(index)">
        {{ item }}
      </li>
    </ul>
    <div class="tab-content">
      <slot></slot>
    </div>
  </div>
</template>

2. Définissez l'effet de sélection

Ensuite, nous devons ajouter l'effet de sélection au composant Tab. Plus précisément, lorsque l'utilisateur clique sur un onglet, nous devons faire passer l'onglet à l'état sélectionné et afficher la zone de contenu de l'onglet correspondante.

2.1 Définir la variable currentIndex dans l'attribut data

Tout d'abord, nous devons définir une variable nommée "currentIndex" dans l'attribut data du composant pour enregistrer l'index de l'onglet actuellement sélectionné. Parallèlement, nous fixons la valeur initiale de cette variable à 0, ce qui signifie que le premier onglet est sélectionné par défaut.

<script>
export default {
  name: 'Tab',
  data() {
    return {
      currentIndex: 0,
      tabs: ['Tab 1', 'Tab 2', 'Tab 3']
    };
  },
  methods: {
    handleClick(index) {
      this.currentIndex = index;
    }
  }
};
</script>

Dans le code ci-dessus, nous avons défini la méthode handleClick, qui est utilisée pour gérer l'événement de clic sur l'onglet. Lorsque l'utilisateur clique sur un onglet, cette méthode met à jour l'index actuellement sélectionné avec l'index cliqué.

2.2 Utilisez :class pour lier le nom de la classe active

Ensuite, nous devons utiliser la directive :class pour lier le nom de la classe active à l'onglet. Plus précisément, nous pouvons utiliser une expression ternaire pour déterminer si un onglet est sélectionné. Si tel est le cas, ajoutez le nom de la classe active, sinon ne l'ajoutez pas.

<li v-for="(item, index) in tabs"
    :key="index"
    :class="{ 'active': index === currentIndex }"
    @click="handleClick(index)">
  {{ item }}
</li>

Dans le code ci-dessus, nous utilisons la directive :class sur l'élément li, qui déterminera s'il faut ajouter le nom de la classe active selon que l'index est égal à l'index actuel. De cette façon, lorsque l'utilisateur clique sur un onglet, le style de l'onglet actuel passera à l'état sélectionné.

2.3 Afficher le contenu de l'onglet correspondant

Enfin, nous devons utiliser le mécanisme de slot de Vue.js pour afficher dynamiquement le contenu de l'onglet correspondant. Plus précisément, nous pouvons définir un emplacement nommé « TabContent » dans le composant et utiliser la directive v-if pour déterminer si l'onglet actuel est sélectionné. Si c'est le cas, le contenu de l'emplacement est affiché, sinon il n'est pas affiché.

<template>
  <div class="tab">
    <ul class="tab-nav">
      <li v-for="(item, index) in tabs"
          :key="index"
          :class="{ 'active': index === currentIndex }"
          @click="handleClick(index)">
        {{ item }}
      </li>
    </ul>
    <div class="tab-content">
      <slot v-if="index === currentIndex"></slot>
    </div>
  </div>
</template>

Dans le code ci-dessus, nous utilisons la directive v-if pour déterminer si l'onglet actuel est sélectionné. Si tel est le cas, le contenu de l'emplacement s'affiche.

3. Résumé

Il est très courant d'utiliser le composant Tab dans les applications Vue.js, et la définition de l'effet de sélection des onglets est également un moyen nécessaire pour améliorer l'expérience interactive. Dans cet article, nous expliquons comment utiliser Vue.js pour créer le composant Tab et définir l'effet de sélection. Nous avons d'abord défini la zone de navigation par onglets et la zone de contenu de l'onglet dans le composant, puis utilisé la directive :class et l'expression ternaire pour lier le nom de la classe active à l'onglet, et enfin utilisé la directive slot et v-if pour afficher dynamiquement le contenu de l'onglet correspondant. . J'espère que cet article pourra vous aider à mieux comprendre l'utilisation de Vue.js et comment obtenir l'effet de sélection par onglets.

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!