Méthode d'implémentation du composant boîte pliante/accordéon dans le document Vue

Vue, en tant que framework JavaScript populaire, fournit de nombreux composants et fonctions qui facilitent le développement. Un composant courant de l'interface utilisateur est l'accordéon (également appelé accordéon), qui permet aux utilisateurs de développer et de réduire le contenu pour économiser de l'espace. Dans la documentation Vue, nous pouvons trouver un composant de boîte pliante simple mais entièrement fonctionnel. Présentons sa méthode d'implémentation.

Tout d'abord, dans le composant Vue, nous devons définir certaines données pour contrôler l'état développé de la boîte pliante. Ces données peuvent être une valeur booléenne, telle que isCollapsed. Si isCollapsed est vrai, la boîte pliante est réduite ; si elle est fausse, la boîte pliante est développée.

Ensuite, nous devons utiliser la directive v-if ou v-show dans le modèle Vue pour contrôler l'affichage et le masquage de la boîte pliante en fonction de l'état isCollapsed. La directive v-if peut supprimer complètement les éléments DOM, tandis que la directive v-show contrôle uniquement l'affichage et le masquage des éléments via l'attribut d'affichage CSS. Puisque le contenu doit être affiché lorsque la zone de réduction est développée, nous plaçons le contenu à l'intérieur de la directive.

Voici un exemple de modèle de boîte de réduction simple :

<template>
  <div>
    <button @click="isCollapsed = !isCollapsed">{{ isCollapsed ? '展开' : '收起' }}</button>

    <div v-show="!isCollapsed">
      这里是折叠框的内容。
    </div>
  </div>
</template>

Dans ce modèle, nous utilisons un bouton pour basculer la valeur de isCollapsed et afficher le texte correspondant sur le bouton. Le contenu de la boîte de réduction est contrôlé à l'aide de la commande v-show et s'affiche lorsque isCollapsed est faux.

Ensuite, nous pouvons ajouter quelques styles au composant boîte pliante pour obtenir de meilleurs effets d'interface. Un style de base pourrait être :

<style>
  .collapse {
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 10px;
  }
</style>

Appliquer ce style au composant de boîte de réduction :

<template>
  <div class="collapse">
    <button @click="isCollapsed = !isCollapsed">{{ isCollapsed ? '展开' : '收起' }}</button>

    <div v-show="!isCollapsed">
      这里是折叠框的内容。
    </div>
  </div>
</template>

Ce composant de boîte de réduction ne s'applique qu'à une seule boîte de réduction. Si nous devons implémenter plusieurs boîtes pliantes, nous pouvons utiliser l'instruction de boucle v-for de Vue pour générer dynamiquement plusieurs composants. Nous pouvons utiliser un tableau pour stocker les données d'état, le titre et le contenu correspondant à chaque boîte pliante, et utiliser v-for pour générer plusieurs composants. Voici un exemple :

<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      <div class="collapse">
        <button @click="item.isCollapsed = !item.isCollapsed">{{ item.isCollapsed ? item.title + ' - 展开' : item.title + ' - 收起' }}</button>

        <div v-show="!item.isCollapsed">
          {{ item.content }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        {isCollapsed: true, title: '折叠框标题1', content: '折叠框内容1'},
        {isCollapsed: true, title: '折叠框标题2', content: '折叠框内容2'},
        {isCollapsed: true, title: '折叠框标题3', content: '折叠框内容3'},
      ]
    }
  }
}
</script>

Dans cet exemple, nous utilisons les éléments du tableau pour stocker les données d'état, le titre et le contenu de trois boîtes de réduction. Ensuite, la directive v-for a été utilisée pour générer trois composants. L'état développé, le titre et le contenu de chaque composant proviennent des éléments du tableau d'éléments correspondants.

En résumé, la méthode d'implémentation du composant Folding Box dans le document Vue est très simple. Il suffit de définir une valeur booléenne pour contrôler l'état d'expansion, et d'utiliser les instructions v-if ou v-show pour afficher et masquer. . Si vous devez implémenter plusieurs boîtes pliantes, nous pouvons utiliser la directive v-for pour générer dynamiquement plusieurs composants. En étudiant et en pratiquant le code source de ce composant, nous pouvons rapidement maîtriser l'utilisation de base de Vue et l'utiliser pour créer des composants et des applications d'interface utilisateur plus complexes.

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!