Cliquez pour annuler l'étiquette de la zone de saisie vue

Dans le développement de Vue, la zone de saisie est un composant très important. Dans de nombreux cas, nous devons personnaliser la zone de saisie pour obtenir une meilleure expérience utilisateur. L'une des exigences courantes consiste à ajouter des étiquettes aux zones de saisie. Les balises jouent un très bon rôle d’invite et de classification dans la zone de saisie. Les utilisateurs peuvent trouver rapidement les informations dont ils ont besoin en fonction des balises, améliorant ainsi l'efficacité de l'utilisation. Cependant, lorsque nous ajoutons des balises à la zone de saisie, nous rencontrons souvent un problème : comment annuler les balises ajoutées. Aujourd'hui, nous allons discuter de cette question.

1. Comment implémenter la fonction d'ajout de balises

Dans Vue, nous pouvons obtenir le contenu saisi par l'utilisateur via l'instruction v-model. Autrement dit, en obtenant la valeur de v-model, nous pouvons obtenir le texte saisi par l'utilisateur. Par conséquent, dans une simple zone de saisie, nous pouvons compléter la fonction de saisie en liant v-model. Supposons que nous devions maintenant ajouter une étiquette à la zone de saisie. Nous pouvons ajouter l'étiquette en tant que composant indépendant et combiner les composants de la zone de saisie et de l'étiquette. Voici un exemple de code pour une implémentation simple :

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

Dans ce code, nous définissons un composant nommé "Tags". Ce composant est un composant d'étiquette, responsable de la gestion de toutes les étiquettes. Nous avons également défini une zone de saisie avec la directive v-model et combiné le composant label avec la zone de saisie. Une fois que l'utilisateur a saisi le texte, nous pouvons écouter l'événement de changement du composant d'étiquette et gérer l'étiquette. De cette façon, nous pouvons ajouter des étiquettes à la zone de saisie.

2. Comment ajouter un bouton "Annuler" sur une étiquette

Lors du processus d'ajout d'une étiquette, nous pouvons rencontrer une situation : l'utilisateur opère par erreur, ou ajoute une mauvaise étiquette. Dans ce cas, l’utilisateur devra très probablement annuler la balise. Par conséquent, ajouter un bouton « Annuler » à droite de l’étiquette est une bonne option. Alors, comment implémenter cette fonction ?

Nous pouvons ajouter un événement de suppression au composant d'étiquette. Lorsque l'utilisateur clique sur le bouton "Annuler", cet événement est déclenché et l'étiquette actuelle est supprimée du composant. Voici un exemple de code simple :

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

Dans ce code, nous ajoutons un style au composant label qui attend l'événement de suppression, et ajoutons également un bouton "Annuler" à chaque étiquette. Lorsque nous cliquons sur le bouton, nous supprimons la balise actuelle en appelant la méthode deleteTag et déclenchons l'événement de changement via la méthode $emit.

3. Comment gérer les problèmes lors de l'annulation des balises

Après avoir implémenté la fonction « annuler » des balises, nous devons réfléchir à la manière de résoudre certains problèmes causés par la suppression des balises. Par exemple, lorsque l'utilisateur supprime une étiquette, l'intégralité du contenu de la zone de saisie peut être supprimée. À ce stade, nous devons repositionner le curseur à la bonne position.

Afin de résoudre ce problème, nous devons obtenir la position du curseur de la zone de saisie avant et après la suppression lors de la suppression de l'étiquette, puis déplacer le curseur vers la position correcte après la suppression de l'étiquette. Voici un exemple de code simple :

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

Dans ce code, nous obtenons la position du curseur avant suppression en obtenant les propriétés selectionStart et selectionEnd de la zone de saisie. Nous déplaçons ensuite le curseur au bon endroit après avoir supprimé l’étiquette. Ce qu'il faut noter ici, c'est que nous ne pouvons pas exploiter directement les éléments DOM dans la méthode, sinon des erreurs se produiront. Par conséquent, nous utilisons la méthode $nextTick pour mettre à jour l'élément DOM une fois la prochaine mise à jour du composant terminée.

Résumé

Dans Vue, la zone de saisie est un composant très couramment utilisé. Afin d'améliorer l'expérience utilisateur, nous devons souvent ajouter une étiquette à la zone de saisie et ajouter une étiquette au bouton "Annuler". Lors de l'implémentation de cette fonction, nous devons prêter attention à certains détails, tels que la gestion de la position du curseur. Ce n'est qu'en réfléchissant bien que nous pourrons rendre notre zone de saisie plus parfaite.

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!