vue实现一个标签选择
Vue 标签选择实现方案
基础标签选择组件
使用 Vue 的 v-for 指令和 v-model 实现基础标签选择功能：
<template>
<div class="tag-selector">
<div
v-for="tag in availableTags"
:key="tag"
class="tag"
:class="{ 'selected': selectedTags.includes(tag) }"
@click="toggleTag(tag)"
>
{{ tag }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
availableTags: ['前端', '后端', '移动端', '数据库', 'DevOps'],
selectedTags: []
}
},
methods: {
toggleTag(tag) {
const index = this.selectedTags.indexOf(tag)
if (index > -1) {
this.selectedTags.splice(index, 1)
} else {
this.selectedTags.push(tag)
}
}
}
}
</script>
<style>
.tag-selector {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.tag {
padding: 4px 12px;
border: 1px solid #ccc;
border-radius: 16px;
cursor: pointer;
}
.tag.selected {
background-color: #42b983;
color: white;
border-color: #42b983;
}
</style>支持自定义标签输入
扩展组件以支持用户输入新标签：
<template>
<div>
<input
v-model="newTag"
@keyup.enter="addNewTag"
placeholder="输入新标签"
/>
<!-- 原有标签选择部分 -->
</div>
</template>
<script>
export default {
data() {
return {
newTag: ''
}
},
methods: {
addNewTag() {
if (this.newTag.trim() && !this.availableTags.includes(this.newTag)) {
this.availableTags.push(this.newTag.trim())
this.newTag = ''
}
}
}
}
</script>使用第三方组件库
对于更复杂的需求，可以考虑使用现成的组件库：
npm install vue-tags-input使用示例：
<template>
<vue-tags-input
v-model="tag"
:tags="tags"
@tags-changed="newTags => tags = newTags"
/>
</template>
<script>
import VueTagsInput from '@johmun/vue-tags-input';
export default {
components: {
VueTagsInput
},
data() {
return {
tag: '',
tags: [
{ text: '前端' },
{ text: '后端' }
]
}
}
}
</script>性能优化建议
对于大量标签的情况，考虑以下优化：
- 使用虚拟滚动只渲染可见区域的标签
- 添加搜索过滤功能
- 对标签数据进行分组分类
与父组件通信
通过事件和props实现父子组件通信：
<!-- 子组件 -->
<script>
export default {
props: ['initialTags'],
emits: ['update:tags'],
watch: {
selectedTags(newVal) {
this.$emit('update:tags', newVal)
}
}
}
</script>
<!-- 父组件 -->
<template>
<tag-selector
:initial-tags="preselectedTags"
@update:tags="handleTagsUpdate"
/>
</template>以上方案可根据具体需求进行组合和调整，实现不同复杂度的标签选择功能。
