Maison > Article > interface Web > Comment implémenter un composant de sélection segmentée à l'aide de Vue ?

Comment implémenter un composant de sélection segmentée à l'aide de Vue ?

WBOYoriginal: 2023-06-25 11:53:42933parcourir

Vue est l'un des frameworks de développement front-end les plus populaires aujourd'hui, avec de nombreuses fonctionnalités efficaces et faciles à utiliser, telles que la liaison de données, la composantisation, la réactivité, etc. La sélection de segments est un composant d'interface utilisateur courant qui permet aux utilisateurs de sélectionner un ou plusieurs segments. Elle est généralement utilisée dans des scénarios tels que les conditions de requête, le filtrage d'étiquettes et le filtrage de données. Cet article explique comment utiliser Vue pour implémenter un composant de sélection segmenté.

Préparation

Avant de commencer, nous devons préparer les fichiers suivants :

index.html : Contient l'introduction de Vue et le code suspendu du composant
Segment.vue : Le code pour la sélection de segment de composants

Ajoutez le code suivant dans le fichier index.html :

<!DOCTYPE html>
<html>
  <head>
    <title>Segment Selector Component</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3.0.0/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script src="app.js"></script>
  </body>
</html>

Ici, nous utilisons la version globale de Vue 3.0 et l'introduisons dans la page. Un script nommé app.js est également introduit pour le montage des composants.

Créez ensuite le fichier app.js et ajoutez le code suivant :

import Segment from './Segment.vue';

const app = Vue.createApp({});
app.component('Segment', Segment);
app.mount('#app');

Ici, nous utilisons l'API de Vue 3.0 pour créer une instance d'application vide, enregistrer un composant nommé Segment et le monter sur l'id Sur l'élément DOM de l'application. Dans le même temps, nous devons également créer un fichier nommé Segment.vue pour implémenter le code du composant de sélection de segment.

Implémentation du composant de sélection de segment

Dans le fichier Segment.vue, nous implémentons un composant nommé Segment. Nous devons ajouter trois accessoires : data, selectedIndex et multiSelect. data est la source de données segmentée, selectedIndeX est l'index segmenté actuellement sélectionné et multiSelect indique s'il faut activer le mode de sélection multiple. Dans le même temps, nous devons définir une méthode handleSegmentClick dans le composant pour gérer les événements de clic segmentés.

<template>
  <div class="segment-container">
    <div
      v-for="(segment, index) in data"
      :key="index"
      :class="{
        'segment': true,
        'segment-active': multiSelect ?
          selectedIndex.includes(index) :
          selectedIndex === index
      }"
      @click="handleSegmentClick(index)"
    >
      {{ segment }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'Segment',
  props: {
    data: {
      type: Array,
      default: () => []
    },
    selectedIndex: {
      type: [Number, Array],
      default: -1
    },
    multiSelect: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleSegmentClick(index) {
      let selected = this.selectedIndex;

      if (this.multiSelect) {
        selected = (Array.isArray(selected)) ? selected : [];
        if (selected.includes(index)) {
          selected.splice(selected.indexOf(index), 1);
        } else {
          selected.push(index);
        }
      } else {
        selected = index === selected ? -1 : index;
      }

      this.$emit('update:selectedIndex', selected);
    }
  }
};
</script>

Dans la partie modèle, nous utilisons v-for pour parcourir chaque segment de la source de données et ajouter des styles actifs aux segments sélectionnés via des instructions de liaison de style. Dans le même temps, en liant les événements avec @click, nous implémentons un traitement segmenté des événements de clic.

Dans la section script, nous définissons une méthode appelée handleSegmentClick pour gérer les événements de clic segmentés. Dans le procédé, nous obtenons d'abord le segment actuellement sélectionné et effectuons différents traitements selon l'état du mode multi-sélection ou non. Plus précisément, en mode multi-sélection, nous stockons l'état sélectionné dans le tableau sélectionné, et lorsqu'un segment est sélectionné, nous ajoutons l'index du segment actuel à sélectionné, sinon nous supprimons l'index du segment sélectionné. En mode de sélection radio, nous stockons uniquement l'index du segment sélectionné dans sélectionné. Si le segment cliqué est déjà sélectionné, l'état sélectionné est effacé.

Enfin, nous transmettons l'état sélectionné mis à jour au composant parent via this.$emit. Et liez la méthode handleSegmentClick à l’événement @click dans le modèle.

Utilisation du composant de sélection de segment

Dans le fichier index.html, nous créons une variable appelée segmentData, qui est un type de tableau, et la transmettons au composant Segment en tant qu'accessoires du composant.

<div id="app">
  <Segment
    :data="segmentData"
    :selected-index.sync="selectedIndex"
    :multi-select="multiSelect"
  />
</div>

Comme vous pouvez le voir, nous avons configuré trois accessoires : data, selectedIndex et multiSelect selectedIndex utilise le modificateur .sync pour prendre en charge la liaison de données bidirectionnelle.

Ensuite, nous ajoutons le code suivant dans app.js pour l'initialisation des données et le traitement associé :

import Segment from './Segment.vue';

const app = Vue.createApp({
  data() {
    return {
      segmentData: ['Web Development', 'Data Science', 'Mobile Development'],
      selectedIndex: 0,
      multiSelect: false
    };
  },
  methods: {
    toggleSelection() {
      this.multiSelect = !this.multiSelect;
      this.selectedIndex = this.multiSelect ? [0, 2] : 0;
    }
  }
});

app.component('Segment', Segment);

app.mount('#app');

Dans la méthode data, nous initialisons trois variables : segmentData, selectedIndex et multiSelect. segmentData est la source de données de segment que nous devons sélectionner, selectedIndex est utilisé pour enregistrer l'index de segment actuellement sélectionné et multiSelect indique si la sélection de segment active le mode multi-sélection.

Dans les méthodes, nous définissons une méthode appelée toggleSelection, dans laquelle nous basculons la valeur de multiSelect et définissons la valeur de selectedIndex en fonction de son état. Plus précisément, lorsque multiSelect est vrai, nous définissons selectedIndex sur [0, 2], indiquant que les premier et troisième segments sont sélectionnés, sinon nous définissons selectedIndex sur 0, indiquant que le premier segment est sélectionné.

Résumé

Dans cet article, nous avons présenté comment implémenter un composant de sélection segmenté à l'aide de Vue. Ce composant est un composant général de l'interface utilisateur qui peut être utilisé dans divers scénarios, tels que les conditions de requête, le filtrage des étiquettes, le filtrage des données, etc. Grâce à l'introduction de cet article, les lecteurs peuvent apprendre à utiliser Vue pour implémenter des fonctionnalités importantes telles que la liaison de données, la composantisation et la réactivité, et approfondir leur compréhension et leur utilisation de Vue.

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!

html for JS 事件 dom this ui

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment résoudre le problème « Erreur : composant de route invalide : xxx » lors de l'utilisation de vue-router dans une application Vue ?Article suivant：Comment résoudre le problème « Erreur : composant de route invalide : xxx » lors de l'utilisation de vue-router dans une application Vue ?

Articles Liés

Voir plus