编辑、保存/取消按钮须严格互斥，统一用 rowstate（'view'/'editing'/'saving'）控制显隐与禁用；需同步重置输入状态、清理定时器、监听 blur 兜底，并注意移动端长按兼容性。
编辑按钮和保存/取消按钮必须严格互斥，否则用户可能点着“编辑”又误触“保存”，导致空提交或状态错乱。
按钮显隐逻辑靠单一状态变量控制
不能用两个独立布尔值（如 isEditing 和 isSaving）分别控制按钮显示，容易出现状态不一致。统一用一个状态字段，比如 rowState，取值为 'view'、'editing' 或 'saving'。
-
rowState === 'view'时只显示编辑按钮，隐藏保存/取消 -
rowState === 'editing'时只显示保存/取消按钮，隐藏编辑按钮 -
rowState === 'saving'时三个按钮都禁用（加btn--disabled类），避免重复提交
DOM 渲染时用 v-if 或 classList.toggle 控制按钮可见性
直接操作 style.display = 'none' 容易被其他样式覆盖，也不利于可访问性。推荐用类名切换：
- Vue 场景：用
v-if="rowState === 'view'"渲染编辑按钮，v-if="rowState === 'editing'"渲染保存/取消按钮 - 原生 JS 场景：用
editBtn.classList.toggle('hidden', rowState !== 'view')，配合 CSS.hidden { display: none; } - 别在按钮上写
disabled属性来“隐藏”——它只是禁用，仍占布局、可聚焦、屏幕阅读器会读出，不符合互斥意图
点击编辑按钮后要同步重置行内输入状态
常见错误是只改按钮状态，但没清空或还原 input 的 value 和焦点。结果用户点“编辑”→输一半→点“取消”→再点“编辑”，input 里还残留上次的脏数据。
- 进入编辑前，先从 data 源读取原始值：
input.value = rowData.name - 调用
input.select()或input.focus()，确保光标就位 - 如果用了防抖保存（比如 blur 触发），点击“编辑”时得先清除旧的 timeout ID，防止旧逻辑干扰新编辑
- 保存或取消后，务必重置
rowState并触发一次视图更新，否则按钮状态卡住
移动端长按触发编辑时按钮状态容易不同步
iOS Safari 中长按弹出菜单（复制/搜索等）会中断事件流，导致 touchend 没触发，rowState 还停留在 'editing'，但 input 已失焦、按钮却没切回 view 态。
- 监听
blur事件作为兜底：只要 input 失焦且当前是 editing 态，就自动切回 view，并清理编辑态 DOM - 给长按逻辑加
setTimeout延迟（比如 350ms），避开系统菜单弹出时机 - 在
touchstart阶段记录 target 元素，touchend时比对是否仍是同一元素，防止误判
最常被忽略的是：按钮互斥不只是视觉问题，它背后绑定着数据锁定、输入框生命周期、以及事件监听器的注册/销毁节奏——漏掉任意一环，都会让“点一下没反应”或“点了两次才生效”变成常态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
