Développement de composants Vue : méthode d'implémentation du composant de sélection de balises

Développement de composants Vue : méthode d'implémentation du composant de sélecteur de balises

Introduction :
Le sélecteur de balises est l'un des composants courants dans le développement Web. Il peut être utilisé pour sélectionner une ou plusieurs balises spécifiques afin de fournir aux utilisateurs un fonctionnement pratique. Cet article expliquera comment implémenter un composant de sélection d'étiquettes simple dans le développement de composants Vue et fournira des exemples de code spécifiques.

1. Analyse des exigences :
Nous devons implémenter un composant de sélection de balises. Les exigences spécifiques sont les suivantes :

1. Afficher une liste de toutes les balises sélectionnables ;
2. Autoriser les utilisateurs à rechercher des balises via la zone de saisie ; Les utilisateurs peuvent sélectionner un ou plusieurs tags ;
3. Les tags sélectionnés par l'utilisateur doivent pouvoir être supprimés.
4. 2. Sélection de la technologie :

Dans le développement de composants Vue, nous pouvons utiliser la bibliothèque de composants fournie par Element UI pour implémenter le composant sélecteur d'étiquettes. Element UI est une bibliothèque de composants basée sur Vue.js, qui fournit un riche ensemble de composants d'interface utilisateur et de fonctions interactives.

3. Conception et mise en œuvre des composants :

Structure du composant :

Notre composant sélecteur d'étiquettes peut être divisé en deux niveaux : conteneur externe et composant interne. Le conteneur externe est utilisé pour afficher l'étiquette sélectionnée et déclencher l'affichage et le masquage de la zone de saisie. Le composant interne est utilisé pour afficher la liste des étiquettes sélectionnables et gérer les opérations de recherche, de sélection et de suppression de la zone de saisie.
1. 
   
Implémentation du composant :
2. (1) Dans le conteneur externe, définissez un attribut de données pour enregistrer la liste d'étiquettes sélectionnée et l'état d'affichage de la zone de saisie.

   <template>
     <div class="tag-selector">
    <div class="selected-tags">
      <!-- 已选择的标签展示 -->
      <el-tag v-for="tag in selectedTags" :key="tag" closable @close="removeTag(tag)">{{ tag }}</el-tag>
    </div>
    <el-input v-model="inputValue" placeholder="请输入标签" @focus="showDropdown" @input="handleInput"></el-input>
    <!-- 标签列表下拉框 -->
    <el-dropdown :show="dropdownVisible">
      <el-dropdown-menu>
        <el-dropdown-item v-for="tag in filteredTags" :key="tag" @click="selectTag(tag)">{{ tag }}</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
     </div>
   </template>

   
   (2) Dans le composant interne, nous devons définir les données de la liste d'étiquettes, la valeur de la zone de saisie et l'état caché d'affichage. Vous devez également définir des méthodes pour gérer les opérations de recherche, de sélection et de suppression de la zone de saisie.

   <script>
     export default {
    data() {
      return {
        tags: ['HTML', 'CSS', 'JavaScript', 'Vue.js', 'React', 'Angular'],
        inputValue: '',
        dropdownVisible: false
      }
    },
    computed: {
      selectedTags() {
        // 根据输入框的值筛选已选择的标签
        return this.tags.filter(tag => tag.includes(this.inputValue))
      },
      filteredTags() {
        // 根据输入框的值筛选可选择的标签
        return this.tags.filter(tag => tag.includes(this.inputValue))
      }
    },
    methods: {
      showDropdown() {
        this.dropdownVisible = true
      },
      handleInput(value) {
        this.inputValue = value
      },
      selectTag(tag) {
        this.inputValue = ''
        this.dropdownVisible = false
        // 将选择的标签添加到已选择的标签列表中
        this.selectedTags.push(tag)
      },
      removeTag(tag) {
        // 删除已选择的标签
        const index = this.selectedTags.indexOf(tag)
        if (index > -1) {
          this.selectedTags.splice(index, 1)
        }
      }
    }
     }
   </script>

4. Utilisation du composant :

Vous pouvez utiliser le composant sélecteur d'étiquettes comme sous-composant d'autres composants, tels qu'un composant de formulaire :

<template>
  <div>
    <label>标签选择：</label>
    <tag-selector></tag-selector>
  </div>
</template>

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

  export default {
    components: {
      TagSelector
    }
  }
</script>

5. Résumé :

Cet article présente l'implémentation des sélecteurs d'étiquettes dans le composant Vue Méthodes de composants de développement. En utilisant la bibliothèque de composants d'Element UI, nous pouvons facilement concevoir et implémenter des composants. L'exemple de code montre comment gérer les opérations de recherche, de sélection et de suppression de la zone de saisie pour référence et utilisation par les développeurs.

6. Références :

Documentation officielle d'Element UI : https://element.eleme.cn/

1. Documentation officielle de Vue.js : https://cn.vuejs.org/

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!