当前位置：首页 > VUE

vue实现多标签选择器

2026-03-06 21:12:30VUE

实现多标签选择器的基本思路

使用Vue实现多标签选择器通常需要结合组件化开发、数据绑定和事件处理。核心功能包括标签的展示、添加、删除以及搜索过滤。

基础实现步骤

创建Vue组件 新建一个Vue组件（如TagSelector.vue），定义模板结构、数据属性和方法。

<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="inputValue"
      @keydown.enter="addTag"
      @keydown.backspace="handleBackspace"
      placeholder="输入标签..."
    />
    <div v-if="filteredTags.length" class="tag-suggestions">
      <ul>
        <li
          v-for="(tag, index) in filteredTags"
          :key="index"
          @click="selectTag(tag)"
        >
          {{ tag }}
        </li>
      </ul>
    </div>
  </div>
</template>

定义数据和方法 在脚本部分定义组件的数据和方法，包括标签列表、输入值、选中标签等。

<script>
export default {
  data() {
    return {
      inputValue: '',
      selectedTags: [],
      availableTags: ['Vue', 'React', 'Angular', 'JavaScript', 'TypeScript'],
    };
  },
  computed: {
    filteredTags() {
      return this.availableTags.filter(
        tag =>
          tag.toLowerCase().includes(this.inputValue.toLowerCase()) &&
          !this.selectedTags.includes(tag)
      );
    },
  },
  methods: {
    addTag() {
      if (this.inputValue.trim() && !this.selectedTags.includes(this.inputValue)) {
        this.selectedTags.push(this.inputValue.trim());
        this.inputValue = '';
      }
    },
    removeTag(index) {
      this.selectedTags.splice(index, 1);
    },
    handleBackspace() {
      if (!this.inputValue && this.selectedTags.length) {
        this.selectedTags.pop();
      }
    },
    selectTag(tag) {
      this.selectedTags.push(tag);
      this.inputValue = '';
    },
  },
};
</script>

样式设计 为组件添加样式，确保标签和输入框的视觉效果符合需求。

<style scoped>
.tag-selector {
  border: 1px solid #ccc;
  padding: 8px;
  border-radius: 4px;
}
.selected-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}
.tag {
  background: #e0e0e0;
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
}
.tag button {
  margin-left: 4px;
  background: none;
  border: none;
  cursor: pointer;
}
.tag-suggestions ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.tag-suggestions li {
  padding: 4px 8px;
  cursor: pointer;
}
.tag-suggestions li:hover {
  background: #f0f0f0;
}
</style>

高级功能扩展

异步加载标签 通过API异步加载标签列表，可以使用axios或其他HTTP客户端。

methods: {
  async loadTags() {
    try {
      const response = await axios.get('/api/tags');
      this.availableTags = response.data;
    } catch (error) {
      console.error('加载标签失败:', error);
    }
  },
},
created() {
  this.loadTags();
},

标签验证 在添加标签时增加验证逻辑，例如限制标签长度或格式。

methods: {
  addTag() {
    const tag = this.inputValue.trim();
    if (!tag) return;
    if (tag.length > 20) {
      alert('标签长度不能超过20个字符');
      return;
    }
    if (!/^[a-zA-Z0-9]+$/.test(tag)) {
      alert('标签只能包含字母和数字');
      return;
    }
    if (!this.selectedTags.includes(tag)) {
      this.selectedTags.push(tag);
      this.inputValue = '';
    }
  },
},

组件封装与复用

Props和Events 通过props接收外部标签列表，通过events通知父组件标签的变化。

props: {
  initialTags: {
    type: Array,
    default: () => [],
  },
},
data() {
  return {
    selectedTags: [...this.initialTags],
  };
},
watch: {
  selectedTags(newTags) {
    this.$emit('update:tags', newTags);
  },
},

插槽定制 使用插槽允许父组件自定义标签的渲染方式。

vue实现多标签选择器

<template>
  <div class="tag-selector">
    <div class="selected-tags">
      <slot name="tag" v-for="(tag, index) in selectedTags" :tag="tag" :index="index">
        <span class="tag">
          {{ tag }}
          <button @click="removeTag(index)">×</button>
        </span>
      </slot>
    </div>
  </div>
</template>