Vue - 最新详细实现点击按钮（笔图标）可编辑 input 输入框，点击文字内容后变成 ＜input＞ 输入框同时能修改和取消、删除（详细示例代码，一键复制运行）

前言

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

本文封装的组件，可满足大部分 点击文字后显示 <input> 编辑框（支持修改） 需求。

本文 实现了在 vue2 / vue3 / nuxt 项目开发中，输入框 input 点击右侧编辑图标后变为可编辑状态，当失去焦点后自动保存，

如下图所示，您直接复制，然后按照自己的需求去 更改样式与逻辑，如下图所示：

这样的基础示例，更有利于您进行修改和学习！

组件源码

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

打开 components 文件夹，在里面建立一个 edit.vue 文件，复制以下代码。