Beschriftung des Vue-Eingabefelds. Klicken Sie hier, um den Vorgang abzubrechen

In der Vue-Entwicklung ist das Eingabefeld eine sehr wichtige Komponente. In vielen Fällen müssen wir das Eingabefeld anpassen, um eine bessere Benutzererfahrung zu erzielen. Eine der häufigsten Anforderungen besteht darin, Beschriftungen zu Eingabefeldern hinzuzufügen. Tags spielen im Eingabefeld eine sehr gute Eingabeaufforderungs- und Klassifizierungsfunktion. Benutzer können anhand von Tags schnell die benötigten Informationen finden und so die Nutzungseffizienz verbessern. Wenn wir jedoch Tags zum Eingabefeld hinzufügen, stoßen wir häufig auf ein Problem – wie wir die hinzugefügten Tags abbrechen können. Heute werden wir dieses Thema besprechen.

1. So implementieren Sie die Funktion zum Hinzufügen von Tags

In Vue können wir die vom Benutzer eingegebenen Inhalte über die V-Modell-Anweisung erhalten. Das heißt, indem wir den Wert des V-Modells ermitteln, können wir den vom Benutzer eingegebenen Text abrufen. Daher können wir in einem einfachen Eingabefeld die Eingabefunktion durch Bindung des V-Modells vervollständigen. Angenommen, wir müssen dem Eingabefeld nun eine Beschriftung hinzufügen. Wir können die Beschriftung als unabhängige Komponente hinzufügen und die Eingabefeld- und Beschriftungskomponenten kombinieren. Das Folgende ist ein Beispielcode für eine einfache Implementierung:

<template>
  <div>
    <label>名称：</label>
    <input type="text" v-model="name">
    <tags :value="tags" @change="handleTagsChange" />
  </div>
</template>

<script>
import Tags from './Tags.vue'

export default {
  components: { Tags },
  data () {
    return {
      name: '',
      tags: []
    }
  },
  methods: {
    handleTagsChange (tags) {
      this.tags = tags
    }
  }
}
</script>

In diesem Code definieren wir eine Komponente namens „Tags“. Bei dieser Komponente handelt es sich um eine Etikettenkomponente, die für die Verwaltung aller Etiketten verantwortlich ist. Wir haben außerdem ein Eingabefeld mit der V-Model-Direktive definiert und die Beschriftungskomponente mit dem Eingabefeld kombiniert. Nachdem der Benutzer Text eingegeben hat, können wir das Änderungsereignis der Etikettenkomponente abhören und das Etikett verwalten. Auf diese Weise können wir dem Eingabefeld Beschriftungen hinzufügen.

2. So fügen Sie eine „Abbrechen“-Schaltfläche zu einem Etikett hinzu

Beim Hinzufügen eines Etiketts kann es zu einer Situation kommen: Der Benutzer bedient sich fälschlicherweise oder fügt etwas hinzu Ein falsches Etikett. In diesem Fall muss der Benutzer höchstwahrscheinlich das Tag abbrechen. Daher ist es eine gute Option, rechts neben der Beschriftung eine Schaltfläche „Abbrechen“ hinzuzufügen. Wie implementiert man diese Funktion?

Wir können der Etikettenkomponente ein Löschereignis hinzufügen. Wenn der Benutzer auf die Schaltfläche „Abbrechen“ klickt, wird dieses Ereignis ausgelöst und das aktuelle Etikett aus der Komponente gelöscht. Hier ist ein einfacher Beispielcode:

<template>
  <span class="tag with-cancel" v-for="(tag, index) in tags">
    {{ tag }}
    <button class="delete" @click="deleteTag(index)">X</button>
  </span>
</template>

<script>
export default {
  props: ['value'],
  data () {
    return {
      tags: this.value.slice()
    }
  },
  methods: {
    deleteTag (index) {
      this.tags.splice(index, 1)
      this.$emit('change', this.tags)
    }
  }
}
</script>

In diesem Code fügen wir der Etikettenkomponente einen Stil hinzu, der auf das Löschereignis wartet, und fügen außerdem jedem Etikett eine Schaltfläche „Abbrechen“ hinzu. Wenn auf die Schaltfläche geklickt wird, löschen wir das aktuelle Tag durch Aufrufen der Methode deleteTag und lösen das Änderungsereignis über die Methode $emit aus.

3. Wie man mit Problemen beim Löschen von Tags umgeht

Nachdem wir die Funktion „Abbrechen“ von Tags implementiert haben, müssen wir überlegen, wie wir einige Probleme lösen können, die durch das Löschen von Tags verursacht werden. Wenn der Benutzer beispielsweise eine Beschriftung löscht, wird möglicherweise der gesamte Inhalt des Eingabefelds gelöscht. Zu diesem Zeitpunkt müssen wir den Cursor an die richtige Position neu positionieren.

Um dieses Problem zu lösen, müssen wir beim Löschen des Etiketts die Cursorposition des Eingabefelds vor und nach dem Löschen ermitteln und dann den Cursor nach dem Löschen des Etiketts an die richtige Position bewegen. Das Folgende ist ein einfacher Beispielcode:

deleteTag (index) {
  const input = this.$refs.input
  const startPos = input.selectionStart
  const endPos = input.selectionEnd
  this.tags.splice(index, 1)
  this.$nextTick(() => {
    const delta = startPos - endPos
    input.selectionStart = startPos - delta
    input.selectionEnd = endPos - delta
    this.$emit('change', this.tags)
  })
}

In diesem Code ermitteln wir die Position des Cursors vor dem Löschen, indem wir die Eigenschaften „selectionStart“ und „selectionEnd“ des Eingabefelds abrufen. Anschließend bewegen wir den Cursor an die richtige Stelle, nachdem wir die Beschriftung gelöscht haben. Hierbei ist zu beachten, dass wir DOM-Elemente in der Methode nicht direkt bearbeiten können, da sonst einige Fehler auftreten. Daher verwenden wir die Methode $nextTick, um das DOM-Element zu aktualisieren, nachdem die nächste Aktualisierung der Komponente abgeschlossen ist.

Zusammenfassung

In Vue ist das Eingabefeld eine sehr häufig verwendete Komponente. Um die Benutzererfahrung zu verbessern, müssen wir häufig eine Beschriftung zum Eingabefeld und eine Beschriftung mit der Schaltfläche „Abbrechen“ hinzufügen. Bei der Implementierung dieser Funktion müssen wir auf einige Details achten, beispielsweise auf die Handhabung der Cursorposition. Nur durch sorgfältiges Nachdenken können wir unser Eingabefeld perfekter machen.

Das obige ist der detaillierte Inhalt vonBeschriftung des Vue-Eingabefelds. Klicken Sie hier, um den Vorgang abzubrechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!