标签输入控件核心行为是受控字符串输入+标签列表渲染+值变更通知，需支持输入、回车/失焦添加、显示可删标签、单标签删除及数组数据同步。

明确标签输入控件的核心行为

标签输入控件（Tag Input）不是原生表单元素，它需要支持：输入文本 → 按回车/失焦/点击添加 → 显示为可删除的标签 → 支持删除单个标签 → 同步数组格式的数据（如 ['前端', 'Vue', '组件']）。它本质是“受控的字符串输入 + 标签列表渲染 + 值变更通知”的组合，不是简单包装 <input>，而是管理一个字符串临时值和一个标签数组。

用 Composition API 封装基础逻辑

在 TagInput.vue 中使用 setup，定义响应式状态与核心方法：

• 临时输入值：用 ref('') 存储当前正在输入的内容
• 标签列表：用 ref([]) 存储最终数据，作为组件的 v-model 绑定目标
• 添加标签：过滤空格、去重、非空校验后推入数组，并清空临时输入值
• 删除标签：通过索引从数组中移除对应项
• 暴露 v-model 支持：声明 modelValue prop，监听其变化同步内部数组；触发 update:modelValue 事件更新父级数据

模板结构与交互细节

模板需兼顾输入体验与视觉反馈：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• 外层用 <div class="tag-input"> 包裹，便于样式控制 <li>输入框使用 <code><input type="text">，绑定 v-model="inputValue"，监听 @keyup.enter 和 @blur 触发添加
• 标签区域用 v-for 渲染 tags 数组，每个标签带删除按钮（@click 调用 removeTag）
• 可选：输入框聚焦时显示提示文字（如“回车添加标签”），或禁用重复标签的添加

支持表单集成与扩展

让组件真正可用在复杂表单中，还需考虑：

立即学习“前端免费学习笔记（深入）”；

• 禁用态：接收 disabled prop，控制输入框 :disabled 和标签删除按钮显隐
• 占位符：透传 placeholder 到内部 input
• 尺寸/主题适配：用 props.size 或 CSS 自定义属性（--tag-height）支持不同 UI 风格
• 验证联动：配合 el-form 或自定义表单系统时，提供 validateEvent 控制是否触发校验，或暴露 clearValidate 方法