在前端开发中，经常需要处理用户输入的数据，例如搜索关键字、标签等等。为了方便管理和处理这样的数据，可以使用 npm 包 qs-ngchips。这个包可以将用户输入的一段文本转换成一组标签（chips），方便程序员进一步处理。
安装
使用 npm 安装 qs-ngchips：
--- ------- ----------
引入 qs-ngchips：
------ - ----------- - ---- -------------
-----------
-------- -
------------
---
--
---
--
------ ----- -------- --使用
显示标签列表
在 HTML 中使用 chips-list 标签，并传入一个数组对象：
----------- -----------------------------
示例：
------- -------- - -------- ------- --------
处理用户输入
在 HTML 中使用 chips-input 标签，并监听 (chipAdded) 和 (chipRemoved) 事件。在事件处理方法中处理用户输入的数据。
------------ --------------------------------- ----------------------------------------------------
示例：
------------------ ------- - ------------------ ----- - - ------- - -------------------- ------- - -------------------- ----- - - ------- -
控制用户输入
可以在 chips-input 标签中传入一个正则表达式，控制用户输入的内容。
------------ ------------------------------------
示例：
--------- - ------------------- -- ------------------
自定义样式
可以重新定义样式表中的样式，以适应不同的样式需求。以下是可以自定义的样式类：
chips-list：标签列表容器chips-item：单个标签容器chips-cross：删除标签按钮
示例：
----------- - ------- --- ----- ----- - ----------- - ----------------- ----- - ------------ - ------ ---- -
指导意义
- qs-ngchips 可以帮助开发者快速处理用户输入的一组文本。
- 可以通过传入正则表达式来控制用户输入内容的格式。
- 样式可以根据具体需求进行定制。
示例代码
----------- --------------- -----------------------------
------------ --------------------------------- ------------------------------------- --------------------- -------------------------------
-------
-------- -
------- --- ----- -----
-------- ----
-------- -------------
-
--------- -
----------- -----
-------- -------------
-
--------
--------
------ - ----------- - ---- -------------
------ ------- -
----- --------------
----------- -
-----------
--
------ -
------ -
------- -------- ------- --------
---------- ------------------
-
--
-------- -
------------------ -
------------------ ----- - - -------
--
-------------------- -
-------------------- ----- - - -------
-
-
-
---------来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60065f87238a385564ab6d28