vue实现多标签选择器

Vue 多标签选择器实现

基本结构

使用 Vue 的 v-model 和 v-for 指令构建标签选择器的基础交互。以下是一个简单的实现示例：

<template>
  <div class="tag-selector">
    <div class="selected-tags">
      <span v-for="(tag, index) in selectedTags" :key="index" class="tag">
        {{ tag }}
        <button @click="removeTag(index)">×</button>
      </span>
    </div>
    <input
      v-model="newTag"
      @keydown.enter="addTag"
      placeholder="输入标签后按回车"
    />
  </div>
</template>

数据与逻辑

在 Vue 组件的 script 部分定义数据和方法：

<script>
export default {
  data() {
    return {
      selectedTags: [],
      newTag: ''
    }
  },
  methods: {
    addTag() {
      if (this.newTag.trim() && !this.selectedTags.includes(this.newTag.trim())) {
        this.selectedTags.push(this.newTag.trim())
        this.newTag = ''
      }
    },
    removeTag(index) {
      this.selectedTags.splice(index, 1)
    }
  }
}
</script>

样式优化

添加基本样式使组件更美观：

<style scoped>
.tag-selector {
  border: 1px solid #ddd;
  padding: 8px;
  border-radius: 4px;
}

.selected-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.tag {
  background-color: #e0e0e0;
  padding: 2px 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
}

.tag button {
  margin-left: 4px;
  background: none;
  border: none;
  cursor: pointer;
}

input {
  border: none;
  outline: none;
  width: 100%;
}
</style>

进阶功能

对于更复杂的需求，可以考虑以下增强功能：

• 添加标签自动完成功能，根据输入提供建议
• 实现标签拖拽排序
• 添加标签颜色分类
• 支持从外部数据源加载标签
• 添加标签的最大数量限制

第三方库方案

如果需要更强大的功能，可以考虑使用现成的 Vue 标签选择器库：

1. vue-tags-input：功能丰富的标签输入组件
2. v-select：支持标签模式的选择器
3. vue-multiselect：多功能选择器，支持标签模式

这些库通常提供更多开箱即用的功能，如异步加载选项、自定义渲染等。