Vue component development: tag selector component implementation method

Vue component development: Tag selector component implementation method

Introduction:
The tag selector is one of the common components in Web development and can be used to select One or more specific labels provide users with convenient operations. This article will introduce how to implement a simple label selector component in Vue component development and provide specific code examples.

1. Requirements analysis:
We need to implement a tag selector component. The specific requirements are as follows:

1. Display a list of all selectable tags;
2. Allow users to search for tags through the input box;
3. Users can select one or more tags;
4. The tags selected by users must be able to be deleted.

2. Technology selection:
In Vue component development, we can use the component library provided by Element UI to implement the label selector component. Element UI is a component library based on Vue.js, which provides a rich set of UI components and interactive functions.

3. Component design and implementation:

1. Component structure:
   Our tag selector component can be divided into two levels: outer container and internal component. The outer container is used to display the selected label and trigger the display and hiding of the input box. The internal component is used to display the selectable label list and handle the search, selection and deletion operations of the input box.

2. Component implementation:
   (1) In the outer container, define a data attribute to save the selected label list and the display state of the input box.

   <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) In the internal component, we need to define the label list data, the value of the input box and the display hidden state. You also need to define methods to handle the search, selection and deletion operations of the input box.

   <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. Component usage:
You can use the label selector component as a sub-component of other components, such as a form component:

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

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

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

5. Summary:
This article introduces how to implement the label selector component in Vue component development. By using the component library of Element UI, we can easily design and implement components. The code sample shows how to handle the search, selection and deletion operations of the input box for developers' reference and use.

6. Reference materials:

1. Element UI official documentation: https://element.eleme.cn/
2. Vue.js official documentation: https:/ /cn.vuejs.org/

The above is the detailed content of Vue component development: tag selector component implementation method. For more information, please follow other related articles on the PHP Chinese website!