Vue 컴포넌트 개발: 태그 선택기 컴포넌트 구현 방법-View.js-php.cn

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

WBOY

풀어 주다： 2023-11-24 08:08:24

원래의

982명이 탐색했습니다.

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

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

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

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

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

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

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

구성 요소 구조:

(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>

로그인 후 복사

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

<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/