Heim > Artikel > Web-Frontend > Wie implementiert man eine segmentierte Auswahlkomponente mit Vue?

Wie implementiert man eine segmentierte Auswahlkomponente mit Vue?

WBOYOriginal: 2023-06-25 11:53:42969Durchsuche

Vue ist heute eines der beliebtesten Front-End-Entwicklungsframeworks mit vielen effizienten und benutzerfreundlichen Funktionen wie Datenbindung, Komponentisierung, Reaktionsfähigkeit usw. Die Segmentauswahl ist eine gängige UI-Komponente, die es Benutzern ermöglicht, ein oder mehrere Segmente auszuwählen. Sie wird normalerweise in Szenarien wie Abfragebedingungen, Etikettenfilterung und Datenfilterung verwendet. In diesem Artikel wird erläutert, wie Sie mit Vue eine segmentierte Auswahlkomponente implementieren.

Vorbereitung

Bevor wir beginnen, müssen wir die folgenden Dateien vorbereiten:

index.html: Enthält die Einführung von Vue und den hängenden Code der Komponente
Segment.vue: Der Code für Segmentauswahlkomponenten

Fügen Sie den folgenden Code in die Datei index.html ein:

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

Hier verwenden wir die globale Build-Version von Vue 3.0 und führen sie in die Seite ein. Für das Mounten von Komponenten wird außerdem ein Skript namens app.js eingeführt.

Erstellen Sie als Nächstes die Datei app.js und fügen Sie den folgenden Code hinzu:

import Segment from './Segment.vue';

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

Hier verwenden wir die API von Vue 3.0, um eine leere Anwendungsinstanz zu erstellen, eine Komponente mit dem Namen Segment zu registrieren und sie an die ID des DOM-Elements von anzuschließen die App. Gleichzeitig müssen wir auch eine Datei mit dem Namen Segment.vue erstellen, um den Code der Segmentauswahlkomponente zu implementieren.

Implementierung der Segmentauswahlkomponente

In der Datei Segment.vue implementieren wir eine Komponente namens Segment. Wir müssen drei Requisiten hinzufügen: data, selectedIndex und multiSelect. data ist die segmentierte Datenquelle, selectedIndeX ist der aktuell ausgewählte segmentierte Index und multiSelect gibt an, ob der Mehrfachauswahlmodus aktiviert werden soll. Gleichzeitig müssen wir in der Komponente eine Methode handleSegmentClick definieren, um segmentierte Klickereignisse zu verarbeiten.

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

Im Vorlagenteil verwenden wir v-for, um jedes Segment in der Datenquelle zu durchlaufen und den ausgewählten Segmenten durch Stilbindungsanweisungen aktive Stile hinzuzufügen. Gleichzeitig implementieren wir durch die Bindung von Ereignissen mit @click eine segmentierte Verarbeitung von Klickereignissen.

Im Skriptabschnitt definieren wir eine Methode namens handleSegmentClick, um segmentierte Klickereignisse zu verarbeiten. Bei dieser Methode erhalten wir zunächst das aktuell ausgewählte Segment und führen je nach Status des Mehrfachauswahlmodus oder nicht eine unterschiedliche Verarbeitung durch. Konkret speichern wir im Mehrfachauswahlmodus den ausgewählten Status im Array selected, und wenn ein Segment ausgewählt wird, fügen wir den Index des aktuellen Segments zu selected hinzu, andernfalls entfernen wir den Index des Segments aus selected. Im Radioauswahlmodus speichern wir nur den ausgewählten Segmentindex in ausgewählt. Wenn das angeklickte Segment bereits ausgewählt ist, wird der ausgewählte Status gelöscht.

Schließlich übergeben wir den aktualisierten ausgewählten Status über this.$emit an die übergeordnete Komponente zurück. Und binden Sie die handleSegmentClick-Methode an das @click-Ereignis in der Vorlage.

Verwenden der Segmentauswahlkomponente

In der Datei index.html erstellen wir eine Variable namens segmentData, bei der es sich um einen Array-Typ handelt, und übergeben sie als Requisiten der Komponente an die Segmentkomponente.

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

Wie Sie sehen können, haben wir drei Requisiten konfiguriert: data, selectedIndex und multiSelect selectedIndex verwenden den .sync-Modifikator, um die bidirektionale Datenbindung zu unterstützen.

Als nächstes fügen wir in app.js den folgenden Code für die Dateninitialisierung und die damit verbundene Verarbeitung hinzu:

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');

In der Datenmethode initialisieren wir drei Variablen: segmentData, selectedIndex und multiSelect. segmentData ist die Segmentdatenquelle, die wir auswählen müssen, selectedIndex wird zum Aufzeichnen des aktuell ausgewählten Segmentindex verwendet und multiSelect gibt an, ob die Segmentauswahl den Mehrfachauswahlmodus aktiviert.

In Methoden definieren wir eine Methode namens toggleSelection, in der wir den Wert von multiSelect umschalten und den Wert von selectedIndex entsprechend seinem Status festlegen. Insbesondere wenn multiSelect wahr ist, setzen wir selectedIndex auf [0, 2], was angibt, dass das erste und dritte Segment ausgewählt sind, andernfalls setzen wir selectedIndex auf 0, was angibt, dass das erste Segment ausgewählt ist.

Zusammenfassung

In diesem Artikel haben wir vorgestellt, wie man eine segmentierte Auswahlkomponente mit Vue implementiert. Bei dieser Komponente handelt es sich um eine allgemeine UI-Komponente, die in verschiedenen Szenarien verwendet werden kann, z. B. für Abfragebedingungen, Etikettenfilterung, Datenfilterung usw. Durch die Einführung dieses Artikels können Leser lernen, wie sie Vue verwenden, um wichtige Funktionen wie Datenbindung, Komponentisierung und Reaktionsfähigkeit zu implementieren, und ihr Verständnis und ihre Verwendung von Vue vertiefen.

Das obige ist der detaillierte Inhalt vonWie implementiert man eine segmentierte Auswahlkomponente mit Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html for JS 事件 dom this ui

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie kann das Problem „Fehler: Ungültige Routenkomponente: xxx“ gelöst werden, wenn vue-router in einer Vue-Anwendung verwendet wird?Nächster Artikel：Wie kann das Problem „Fehler: Ungültige Routenkomponente: xxx“ gelöst werden, wenn vue-router in einer Vue-Anwendung verwendet wird?

In Verbindung stehende Artikel

Mehr sehen