前言
随着前端技术的不断发展，我们已经不再只是过去写几个简单的 HTML、CSS、JS 页面的时代了，而是逐渐进入了组件化、模块化、工程化的时代。而作为前端开发人员，经常需要使用各种第三方库和工具来辅助开发。而今天，我将为大家介绍一个非常优秀的 npm 包——op-ngx-chips。
op-ngx-chips 介绍
op-ngx-chips 是一个基于 Angular 开发的组件库，用于实现类似于 tag、chip 等组件的功能。它可以让开发人员快速的实现一个标签输入框，并且支持各种各样的自定义配置，例如 data-binding、自定义样式等等。
op-ngx-chips 安装
使用 op-ngx-chips 很简单，只需要在项目的根目录下，运行以下命令即可：
npm install op-ngx-chips --save
op-ngx-chips 用法
在安装好 op-ngx-chips 后，我们就可以开始使用它了。下面是使用 op-ngx-chips 实现标签输入框的基本用法：
- 引入 op-ngx-chips 模块
在需要使用 op-ngx-chips 的模块中，引入 op-ngx-chips 模块即可：
-- -------------------- ---- -------
------ - -------------- - ---- ---------------
------ - ----------- - ---- ----------------
-- ---
-----------
-------- -
---------------
------------
-- ---
--
-- ---
--
------ ----- --------- - -- 声明组件中的变量
我们需要在组件中定义一个变量来存储标签输入框的值，并且需要在组件中定义一个函数来处理输入变化的事件：
public items = [];
public onChange(event: any) {
console.log('Input changed:', event);
}- 在组件的 HTML 模板中使用 op-ngx-chips
在组件的 HTML 模板中，使用 op-ngx-chips 指令来创建标签输入框：
<ngx-chips [(ngModel)]="items" (change)="onChange($event)"> </ngx-chips>
- 运行应用
现在，我们就可以运行应用并使用标签输入框了。在输入框中输入内容并按下回车键，就可以看到新的标签出现在输入框下方了。
op-ngx-chips 配置
op-ngx-chips 提供了很多的配置项，我们可以根据需求来进行自定义配置。下面是一些常见的 op-ngx-chips 配置项：
- placeholder
placeholder 配置项用于设置标签输入框的提示文本，默认值为 'Enter a value'。
<ngx-chips [placeholder]="'Type and hit enter!'"></ngx-chips>
- readonly
readonly 配置项用于设置标签输入框是否为只读模式，默认值为 false。
<ngx-chips [readonly]="true"></ngx-chips>
- addOnBlur
addOnBlur 配置项用于设置当输入框失去焦点时，是否自动添加输入框中的内容为标签，默认值为 true。
<ngx-chips [addOnBlur]="false"></ngx-chips>
- addTagOnEnter
addTagOnEnter 配置项用于设置是否在按下回车键时，添加输入框中的内容为标签，默认值为 true。
<ngx-chips [addTagOnEnter]="false"></ngx-chips>
op-ngx-chips 按钮式标签
op-ngx-chips 还提供了按钮式标签的功能，支持单选、多选、无限制选择、自定义样式等。下面是一个示例：
<ngx-chips [(ngModel)]="buttonItems"
[options]="buttonOptions"
[multiple]="true"
[name]="'buttonOption'"
[placeholder]="'选择标签'" class="full-width">
</ngx-chips>-- -------------------- ---- -------
------------ -------- - ------ ------
-------------- ----- - -------- ----- ----- ------ ------- ----- ----- ------ ------- ----- ----- -------
------ -----
----- -----
------ --------
----- -------
--
-
------ ----
----- ----
------ ------
----- -------
-
--结论
op-ngx-chips 是一个非常优秀的 npm 包，它可以让我们快速的实现标签输入框的功能，并且支持各种自定义配置。本文介绍了 op-ngx-chips 的详细用法以及常见配置项，并且给出了一个按钮式标签的示例。希望本文能够对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005734381e8991b448e95b6