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 :

3. Conception et mise en œuvre des composants :

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>

   Copier après la connexion
   
   (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>

   Copier après la connexion

4. Utilisation du composant :

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

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

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

6. Références :

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!