Vue - 实现点击按钮（笔图标）可编辑 input 输入框（点击文字内容后变成 ＜input＞ 输入框同时能修改和取消、删除）

前言

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

本文将提供给您一个健壮且代码注释详细的组件源码，无样式只写了核心功能，

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

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

组件源码

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

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

<template>
  <div&g