Vue 컴포넌트 개발: 태그 선택기 컴포넌트 구현 방법

Vue 구성 요소 개발: 태그 선택기 구성 요소 구현 방법

소개:
태그 선택기는 웹 개발의 일반적인 구성 요소 중 하나이며 사용자에게 편리한 작동을 제공하기 위해 하나 또는 일부 특정 태그를 선택하는 데 사용할 수 있습니다. 이 기사에서는 Vue 구성 요소 개발에서 간단한 레이블 선택기 구성 요소를 구현하는 방법을 소개하고 특정 코드 예제를 제공합니다.

1. 요구 사항 분석:
특정 요구 사항은 다음과 같습니다.

1. 선택 가능한 모든 태그 목록을 표시합니다.
2. 사용자가 입력 상자를 통해 태그를 검색할 수 있습니다. 사용자는 하나 이상의 태그를 선택할 수 있습니다.
3. 사용자가 선택한 태그는 삭제할 수 있어야 합니다.
4. 2. 기술 선택:

Vue 컴포넌트 개발에서는 Element UI에서 제공하는 컴포넌트 라이브러리를 사용하여 라벨 선택기 컴포넌트를 구현할 수 있습니다. Element UI는 다양한 UI 구성 요소와 대화형 기능을 제공하는 Vue.js 기반 구성 요소 라이브러리입니다.

3. 구성 요소 설계 및 구현:

구성 요소 구조:

라벨 선택기 구성 요소는 외부 컨테이너와 내부 구성 요소의 두 가지 수준으로 나눌 수 있습니다. 외부 컨테이너는 선택한 레이블을 표시하고 입력 상자의 표시 및 숨기기를 트리거하는 데 사용됩니다. 내부 구성 요소는 선택 가능한 레이블 목록을 표시하고 입력 상자의 검색, 선택 및 삭제 작업을 처리하는 데 사용됩니다.
1. 
   
컴포넌트 구현:
2. (1) 외부 컨테이너에 데이터 속성을 정의하여 선택한 라벨 목록과 입력 상자의 표시 상태를 저장합니다.

   <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) 내부 컴포넌트에서는 라벨 목록 데이터, 입력 상자의 값 및 표시 숨겨진 상태를 정의해야 합니다. 또한 입력 상자의 검색, 선택 및 삭제 작업을 처리하는 메서드를 정의해야 합니다.

   <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. 구성 요소 사용법:

레이블 선택기 구성 요소를 양식 구성 요소와 같은 다른 구성 요소의 하위 구성 요소로 사용할 수 있습니다:

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

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

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

5. 요약:

이 문서에서는 Vue 구성 요소의 레이블 선택기 구현을 소개합니다. 개발 구성 요소 방법. Element UI의 컴포넌트 라이브러리를 이용하면 컴포넌트를 쉽게 디자인하고 구현할 수 있습니다. 코드 샘플은 개발자가 참조하고 사용할 수 있도록 입력 상자의 검색, 선택 및 삭제 작업을 처리하는 방법을 보여줍니다.

6. 참고자료:

Element UI 공식 문서: https://element.eleme.cn/

1. Vue.js 공식 문서: https://cn.vuejs.org/

위 내용은 Vue 컴포넌트 개발: 태그 선택기 컴포넌트 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!