vue实现多标签选择器
实现多标签选择器的核心思路
Vue实现多标签选择器通常需要处理标签的增删改查、输入框联动、数据绑定等功能。以下是两种常见实现方式：
基于原生HTML和Vue双向绑定
使用v-model管理选中标签数组，结合@keydown事件处理输入：
<template>
<div class="tag-input">
<div v-for="(tag, index) in tags" :key="index" class="tag">
{{ tag }}
<span @click="removeTag(index)">×</span>
</div>
<input
v-model="inputVal"
@keydown.enter="addTag"
@keydown.delete="handleBackspace"
placeholder="输入标签..."
/>
</div>
</template>
<script>
export default {
data() {
return {
tags: ['Vue', 'React'],
inputVal: ''
}
},
methods: {
addTag() {
if (this.inputVal && !this.tags.includes(this.inputVal)) {
this.tags.push(this.inputVal)
this.inputVal = ''
}
},
removeTag(index) {
this.tags.splice(index, 1)
},
handleBackspace() {
if (!this.inputVal && this.tags.length) {
this.tags.pop()
}
}
}
}
</script>
<style>
.tag-input {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
.tag {
background: #eee;
padding: 4px 8px;
border-radius: 3px;
display: flex;
align-items: center;
}
.tag span {
margin-left: 4px;
cursor: pointer;
}
</style>使用第三方组件库
对于更复杂的需求，可以使用现成的UI组件库：
<template>
<el-select
v-model="selectedTags"
multiple
filterable
allow-create
placeholder="请选择或输入标签"
style="width: 100%"
/>
</template>
<script>
import { ElSelect } from 'element-plus'
export default {
components: { ElSelect },
data() {
return {
selectedTags: []
}
}
}
</script>实现高级功能的关键点
标签验证：在添加新标签时进行格式校验
validateTag(tag) {
const regex = /^[a-zA-Z0-9_-]{1,20}$/
return regex.test(tag)
}异步加载选项：当需要从后端获取标签选项时
async loadTags(query) {
if (query) {
const res = await api.getTags({ keyword: query })
this.options = res.data
}
}键盘导航：增强键盘操作体验
handleKeyDown(e) {
if (e.key === 'ArrowUp') {
// 上移焦点
}
if (e.key === 'ArrowDown') {
// 下移焦点
}
}性能优化建议
对于大量标签的场景，采用虚拟滚动技术：
<template>
<RecycleScroller
:items="tags"
:item-size="32"
key-field="id"
v-slot="{ item }"
>
<div class="tag-item">{{ item.name }}</div>
</RecycleScroller>
</template>无障碍访问支持
确保组件可通过键盘完全操作：
<div
role="listbox"
aria-multiselectable="true"
tabindex="0"
@keydown="handleListKeyDown"
>
<!-- 标签项 -->
</div>以上方案可根据实际需求组合使用，Element UI、Ant Design Vue等组件库都提供了成熟的多标签选择组件，适合快速集成到项目中。
