Vue标签输入框组件需分离展示态与编辑态，通过modelValue prop和update:modelValue事件支持v-model，双击编辑、回车/失焦提交、ESC取消，input自动聚焦且宽度自适应。

封装 Vue 标签输入框组件（如可双击编辑、支持回车提交、点击空白收起的 my-tag 类型组件），核心是分离「展示态」与「编辑态」，用状态控制切换，并确保值变更能正确同步到父组件。不需要复杂逻辑，但需注意焦点管理、事件边界和 v-model 兼容性。

结构设计：展示区 + 编辑区分离

避免在同一个元素上混用文本显示和输入行为。推荐结构：

• 外层容器（<div class="my-tag">）作为交互根节点 <li>默认显示标签文字（<code><div class="text">{{ tagValue }}</div>），双击时隐藏它
• 编辑时插入 <input type="text">，自动聚焦，绑定当前值并监听回车/失焦
• 不使用 contenteditable —— 光标位置、粘贴处理、移动端兼容性差

v-model 支持：遵循 Vue 3 规范

让组件能被 v-model 直接使用，需满足：


Springboot Vue Builder
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
下载
• 接收 modelValue prop（类型建议为 string 或 string | null）
• 触发 update:modelValue 事件传递新值（例如编辑完成、回车、失焦时）
• 若使用 Vue 3.4+，可用 const modelValue = defineModel<string>();</string> 简化写法
• 清空输入时，应 emit 空字符串 '' 而非 null，保持类型一致

交互逻辑关键点

用户操作必须有明确响应，且不干扰外部流程：

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

• 双击文字区域 → 切换至编辑态，input 获取焦点
• 按 Enter 键 → 提交当前值，退出编辑态，触发 update:modelValue
• 失去焦点（blur）→ 同样提交并退出，防止用户点别处后值丢失
• 点击组件空白区域（非文字、非 input）→ 不触发编辑，避免误操作
• ESC 键可选支持：按下时放弃修改，恢复原值并退出编辑态

样式与体验细节

小细节影响使用感受：

• 编辑态 input 宽度略大于文字宽度（如 min-width: 80px），避免输入时频繁重排
• 输入框边框、背景色与展示态视觉连贯（如都用浅灰底+圆角）
• 过渡动画可加（opacity 或 transform），但不要用 v-if 切换导致焦点丢失
• 移动端需测试软键盘弹出后是否遮挡输入框，必要时用 focus() 后滚动到可视区