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:

3. Reka bentuk dan pelaksanaan 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>

   Salin selepas log masuk
   
   (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>

   Salin selepas log masuk

4. Penggunaan komponen:

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

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

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

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!