Vueコンポーネント開発：タグセレクターコンポーネントの実装方法-Vue.js-php.cn

Vueコンポーネント開発：タグセレクターコンポーネントの実装方法

WBOY

リリース： 2023-11-24 08:08:24

オリジナル

935 人が閲覧しました

Vueコンポーネント開発：タグセレクターコンポーネントの実装方法

Vue コンポーネント開発: タグセレクターコンポーネントの実装方法

はじめに:
タグセレクターは、Web 開発における一般的なコンポーネントの 1 つであり、タグセレクターを使用して、 1 つ以上の特定のラベルは、ユーザーに便利な操作を提供します。この記事では、Vue コンポーネント開発で単純なラベルセレクターコンポーネントを実装する方法を紹介し、具体的なコード例を示します。

1. 要件分析:
タグセレクターコンポーネントを実装する必要があります。特定の要件は次のとおりです:

選択可能なすべてのタグのリストを表示します。
ユーザーは 1 つ以上のタグを選択できます;
ユーザーが選択したタグは削除できる必要があります。

2. テクノロジーの選択:

Vue コンポーネント開発では、Element UI によって提供されるコンポーネントライブラリを使用して、ラベルセレクターコンポーネントを実装できます。 Element UI は、Vue.js に基づくコンポーネントライブラリであり、豊富な UI コンポーネントとインタラクティブ機能のセットを提供します。

3. コンポーネントの設計と実装:

ラベルセレクターコンポーネントは、外部コンテナーと内部コンポーネントの 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.参考資料: