前言
在前端开发中，我们经常需要实现表单中编辑数据的功能，通常的做法是在点击编辑按钮或者双击时，将原本的文字或者区块转化为可编辑状态，在编辑完成后再将结果提交到后台。随着前端框架的不断发展，这个功能已经逐渐被抽象出来，成为了一种极具共性的需求。而 penguin-inplace 正是为了解决这样的需求而诞生的一个 npm 包。
什么是 penguin-inplace？
penguin-inplace 是一个基于 Vue.js 实现的具有高可扩展性、易用性的编辑组件库。它提供了一套简单的 API 解决了大多数 Web 编辑需求，并支持多种动态展示效果。
快速开始
1. 安装
你可以通过 npm 来安装 penguin-inplace：
npm install penguin-inplace
2. 示例代码
下面是一个 penguin-inplace 的基本使用示例，你可以根据你的需求来配置：
-- -------------------- ---- -------
----------
-----
---------------- ---------------------------------
------
-----------
--------
------ -------------- ---- ------------------
------ ------- -
------------
--------------
--
----- -- -- -
------ -
----- ------- -----------------
-
-
-
---------对于这段代码，我们可以看到，penguin-inplace 组件的最基本属性是一个由 v-model 指令绑定的 data 属性，这个属性的初始值就是要被编辑的内容。
3. 更多配置项
penguin-inplace 提供了多个可以定制化的配置项，下面是其中一些重要的：
| Props | 类型 | 说明 |
|---|---|---|
| value/v-model | any | 绑定值，支持双向绑定，并同步更新原始数据 |
| placeholder | string | 输入框初始为空时，提示的文本 |
| type | string | 可选值有 'text'（默认值）、'textarea' |
| disabled | boolean | 是否禁用编辑 |
| editable-on-click | boolean | 是否点击元素时将其转化为可编辑状态 |
| display-value | Function | 控制显示的函数，有返回值的函数会替代默认显示行为 |
我们举一个显示 markdown 并编辑的例子：
-- -------------------- ---- -------
----------
-----
----------------
--------------
----------------------------
------------------
--------------------------
-------------------
------
-----------
--------
------ -------------- ---- ------------------
------ ------- -
------------
--------------
--
----- -- -- -
------ -
----- --------- -------------------
-
--
-------- -
---------------- -
------ ------------
-
-
-
---------其中，我们在上面代码中通过 marked 库将 markdown 转化为 html，在 display-value 属性中通过函数返回值重写了默认的 display-value 行为。
总结
在本篇文章中，我们介绍了 penguin-inplace 这个 Vue.js 组件，提供了它的基本使用示例及更多的配置项，希望本文能够给大家带来一些指导意义，帮助大家更好地实现表单中数据的编辑。如果您在使用过程中有任何问题，欢迎随时与我们联系反馈。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556e281e8991b448d3bf5