前言
在前端编程中，我们经常需要使用到各种类似表单的控件，用来方便地收集用户输入的数据。而且，我们经常需要在输入框或文本区域内支持快捷的编辑操作，比如：输入框内即点即改、双击后直接进入编辑模式、按下ESC键或失去焦点后自动保存等等。使用这些了特性我们可以简化用户操作，提升用户体验。
在这篇文章中，我们将介绍一个npm包，叫做angular2-inline-edition，用它你可以很容易地实现一个可编辑的输入框控件（text-editable）。
什么是 angular2-inline-edition？
angular2-inline-edition 是一个基于Angular2框架的npm包，封装了一组指令和服务，可以用于创建一个可编辑的输入框控件。这些指令和服务实现了如下特性：
- 可以直接在表格单元格、图片、标题等各种HTML元素上使用
- 双击可直接进入编辑模式，按ESC键退出，失去焦点时自动保存
- 可以在编辑时选择输入框大小和样式，也可以使用自定义的样式
- 除了支持文本编辑，还可以支持可调整大小的textarea编辑框和可使用select选择器的下拉菜单
- 支持多种数据类型，如文本、数字、日期、图片等等。
- 更多的可配置选项等等
如果你需要实现一个简单的可编辑输入框控件，则可以使用这个npm包
开始使用
安装 angular2-inline-edition
安装 angular2-inline-edition 所需的 npm 包
--- - ------ -----------------------
引入模块
对于 Angular2 应用， 你需要导入 InlineEditorModule 在你的 AppModule 中
------ - ------------------ - ---- -------------------------- ----------- -------- -------------------- -- ------ ----- --------- --
如何使用
现在，你可以在模板中通过内嵌标签（inline html）使用 text-editable 指令了，它会把一个普通的html元素转化为可编辑的元素，如下：
---- ----------------- --- -- -------------------- ---------- ---- --------- --- -- ------------- ------------------------- ---- ------------ --- ---- -------------- ------------- ------------- -------
以上示例代码将会展示三个不同的 text-editable 的用法。 text-editable 会在两次鼠标点击之间进入编辑模式，按ESC退出编辑，并在失去焦点时保存数据。
当您的输入值需要进行处理时，您可以使用 (change) 事件响应值更改
---- ------------ --- -- ------------- ---------------------------------------------- ----------
您也可以使用 input> 元素作为文本区域
---- --------- --------- --- --------- ------------- ------------------ --------------- ----- ---- ---- ---------------
您可以声明文本区域的样式：
| 属性名称 | 数据类型 | 描述 |
|---|---|---|
| height | string | 指定文本区域的高度 |
| width | string | 指定文本区域的宽度 |
| border | string | 边线样式 |
同时，该npm包还提供了其他许多可用的配置项，让你可以根据你的实际需求对其进行定制。其中有一些列举如下：
- [config]="{dataType: 'string'}"
- [config]="{maxWidth: '600px', maxHeight: '200px'}"
- [config]="{inputClass: 'form-control'}"
- [config]="{containerClass: 'my-custom-class'}"
- [config]="{selectOptions: ['male', 'female']}"
- ...
以上示例代码展示了在 text-editable 元素标签上可以用到的 config 参数。
组件源代码
以下是在应用中使用 angular2-inline-edition 的示例代码。本示例代码定义了一个使用 text-editable 指令的组件。
------ - --------- - ---- ----------------
------------
--------- ---------
--------- -
----
--- ----------- ---- -- -------
----- ------------- -------------------- ---------- ------------------------------ ----------------------------
------- --------------------------------------
-----
-----
------- -------------------------------
-
--
------ ----- ------------ -
----- - -------- --------- ------- --------- ------- ----------
------------------- ----- -
--------------------- -------
-------------------- ------
-
--------- -
--- ------- - ------- ------ - ------------------ - ----
-------------------------
-
---------------- -
------------------------------------------- ---
-
-以上代码中：
- 在模板中，我们定义了一个简单的
ul列表，列表中包含多个可编辑的li元素。 - 我们使用ngFor指令循环遍历了组件中定义的
items数组，使用text-editable指令实现了可编辑li元素。 - 在每个
li元素的后面有一个删除按钮，单击删除指定元素。 - 可以通过调用组件的
addItem()方法实现添加一项。
关于更多
angular2-inline-edition 提供了更丰富的功能，请参见 npm Repository 或自行查阅源代码，了解更多信息。
结语
通过上述内容的介绍，相信大家已经了解了 angular2-inline-edition 的使用方法和相关功能。在开发中使用这个npm包，可以更轻松地实现各种可编辑控件，提升用户交互体验。如果你在使用 angular2-inline-edition 上遇到问题，请参阅该npm包的官方文档或Issues区。如有疑问或建议，欢迎留言讨论。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600559e381e8991b448d77dc