Vue3 - 详细实现点击文字或按钮后 “变成输入框“ 进行文本编辑，同时能保存修改和取消编辑状态功能，文本旁边有笔图标点击后文字变成 input 框可对文字编辑修改，最新解决方案（详细示例代码教程）

前言

如果您需要 Vue2 版本，请访问 这篇文章。

在 vue3 | nuxt3 项目开发中，详解点击按钮修改 input 输入框文字，默认隐藏输入框只显示文本或其他元素，当点击编辑按钮或笔小图标时会变成一个输入框，快捷对文本内容进行修改保存并同步页面数据，点击取消关闭或失去焦点复原状态。

您直接复制代码运行即可，调整为想要的按钮和样式轻松搞定。

---

如下图所示，修改编辑状态下文字会直接变成输入框，并且输入完毕后保存同步数据。

详细示例代码及注释，无论js/ts都可以使用，也适用于nuxt3项目！

组件源码

组件文件位置无所谓，另外建议使用一键复制功能，避免漏选。