在前端开发中，我们经常需要实现 tag、token 等组件。而 npm 包 conlaoch-ngx-chips 就是一个方便快捷地实现这类组件的工具包。
安装
conlaoch-ngx-chips 可以通过 npm 进行安装，命令如下：
--- ------- ------------------
安装完成后，在项目中引入模块：
------ - ------------- - ---- ---------------------
并将 NgxChipModule 注册到您的模块中：
-----------
-------- -
-------------
--
------------- -
--------------
--
---------- ---------------
--
------ ----- ---------- - -用法
conlaoch-ngx-chips 提供了两种基本组件：ngx-chip 和 ngx-chips。
ngx-chip
ngx-chip 是一个简单的标签组件，可以用于展示一些带有标签的信息。使用时，需要在组件中传入 label 属性。
--------- ---------- -------------- --------- ---------- -------------- --------- ---------- --------------
ngx-chips
ngx-chips 是一个多选组件。用户可以在其中添加、删除、选择多个标签。使用时，需要创建一个数据源，并将数据传入组件中。
---------- --------------------------
其中 tags 数据源定义如下：
---- - - - --- -- ----- ---- -- -- - --- -- ----- ---- -- -- - --- -- ----- ---- -- -- - --- -- ----- ---- -- -- - --- -- ----- ---- -- -- --
同时，也可以通过 maxLength 控制最大选择数量：
---------- ------------- ----------------------------
更多属性和方法可以参考官方文档。
示例代码
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
---- ----------------------
----------------------
--------- ---------- --------------
--------- ---------- --------------
--------- ---------- --------------
------
---- ------------------------
-----------------------
---------- ------------- ----------------------------
------
--
------- --
--------------- ---------------- -
-------------- -----
-
--------- -
----------------- -----
-------- ----
------------- ----
-------------- ----
------- --------
-
--------------- -
----------------- -----
-
--------- -
----------------- --------
------ -----
-
--
--
------ ----- ------------ -
---- - -
- --- -- ----- ---- -- --
- --- -- ----- ---- -- --
- --- -- ----- ---- -- --
- --- -- ----- ---- -- --
- --- -- ----- ---- -- --
--
-结语
conlaoch-ngx-chips 是一个便捷的前端标签组件包，可以帮助我们快速地实现多个 tag、token 等组件，并且集成简单，功能齐全，非常值得使用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005663781e8991b448e22fc