Pembangunan komponen Vue: kaedah pelaksanaan komponen pemilih teg

Pembangunan komponen Vue: Kaedah pelaksanaan komponen pemilih tag

Pengenalan:
Pemilih teg ialah komponen biasa dalam pembangunan web Satu boleh digunakan untuk memilih satu atau beberapa teg khusus untuk menyediakan pengguna dengan operasi yang mudah. Artikel ini akan memperkenalkan cara untuk melaksanakan komponen pemilih label mudah dalam pembangunan komponen Vue dan menyediakan contoh kod khusus.

1. Analisis keperluan:
Kami perlu melaksanakan komponen pemilih tag Keperluan khusus adalah seperti berikut:

1. Paparkan senarai semua. tag boleh dipilih;
2. Benarkan pengguna mencari tag melalui kotak input;
3. Pengguna boleh memilih satu atau lebih tag; pengguna mesti boleh dipadam beroperasi.
4. 2. Pemilihan teknologi:

Dalam pembangunan komponen Vue, kami boleh menggunakan perpustakaan komponen yang disediakan oleh UI Elemen untuk melaksanakan komponen pemilih label. UI Elemen ialah perpustakaan komponen berdasarkan Vue.js, yang menyediakan set kaya komponen UI dan fungsi interaktif.

3. Reka bentuk dan pelaksanaan komponen:

Struktur komponen:

Komponen pemilih label kami boleh dibahagikan kepada dua peringkat: bekas luar dan komponen dalaman . Bekas luar digunakan untuk memaparkan label yang dipilih dan mencetuskan paparan dan penyembunyian kotak input Komponen dalaman digunakan untuk memaparkan senarai label yang boleh dipilih dan mengendalikan operasi carian, pemilihan dan pemadaman kotak input.
1. 
   
Pelaksanaan komponen:
2. (1) Dalam bekas luar, tentukan atribut data untuk menyimpan senarai label yang dipilih dan keadaan paparan kotak input.

   <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) Dalam komponen dalaman, kita perlu menentukan data senarai label, nilai kotak input dan keadaan tersembunyi paparan. Anda juga perlu menentukan kaedah untuk mengendalikan operasi carian, pemilihan dan pemadaman kotak input.

   <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. Penggunaan komponen:

Anda boleh menggunakan komponen pemilih label sebagai subkomponen komponen lain, seperti komponen borang:

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

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

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

# 🎜🎜#5 Ringkasan:
Artikel ini memperkenalkan kaedah melaksanakan komponen pemilih label dalam pembangunan komponen Vue. Dengan menggunakan perpustakaan komponen UI Elemen, kami boleh mereka bentuk dan melaksanakan komponen dengan mudah. Sampel kod menunjukkan cara mengendalikan operasi carian, pemilihan dan pemadaman kotak input untuk rujukan dan penggunaan pembangun.

6. Rujukan:

Dokumentasi rasmi UI Elemen: https://element.eleme.cn/

Vue dokumen rasmi: https://cn.vuejs.org/

Atas ialah kandungan terperinci Pembangunan komponen Vue: kaedah pelaksanaan komponen pemilih teg. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!