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 标签选择器库：
vue-tags-input：功能丰富的标签输入组件v-select：支持标签模式的选择器vue-multiselect：多功能选择器，支持标签模式
这些库通常提供更多开箱即用的功能，如异步加载选项、自定义渲染等。
