如果你正在开发一个前端应用，你可能需要添加一个类似 Gmail 的功能。其中，用户可以通过添加文本块来形成标签。这种功能在前端方面比较常见。开发这样的功能需要从头写一些代码，劳逸结合，有没有省事的工具呢？对，就是 npm 包 mn-chips。在本文中，我们将会介绍如何从安装到使用这个 npm 包，以及如何在自己的代码中使用这个包。
安装
mn-chips 是一个 npm 包，所以，首先要安装 node.js 和 npm。安装 node.js 和 npm 的这一步，不需要在这篇文阐述，参见 官网。
接下来，我们可以在终端上使用 npm 安装 mn-chips 包，安装命令如下：
npm install mn-chips
安装完成后，我们可以在项目中的 package.json 文件中看到 mn-chips：
{
"dependencies": {
"mn-chips": "^0.5.3"
}
}使用
首先，我们在项目中引入 mn-chips：
import { Chips } from 'mn-chips';基本用法
-- -------------------- ---- -------
--- ----- - --- ----------------------- -
--------------- -----
---
----------------------- -------- --- -
------------------ --- --------
---
---------------------- -------- --- -
------------------ ---- --------
---在这个例子中，我们使用构造函数创建 Chips 实例，并指定其父容器的 CSS 选择器 '#chips_wrapper' 和一些可选参数。我们还在 Chips 实例上注册了两个事件处理程序。
配置选项
其中，你可以看到，我们使用了 focusOnCreated: false。这意味着即使 Chips 焦点在创建后不会自动聚焦。再看一个例子：
-- -------------------- ---- -------
--- ----- - --- ----------------------- -
------------ ---- ---- ---------
------ --------
--------------------- -------
----- --
---- ------
-- -
---- -------
------ -------------------------------
--
---
--------------------- -------- --- ----- -
-------------------- ------
---
------------------------ -------- --- ----- -
---------------------- ------
---
------------------------ -------- --- ----- -
----------------------- ------
---
------------------------ -------- --- ----- -
---------------------- ------
---
----------------------- -------- --- ----- -
-------------------- ------
---
---------------------- -------- --- ----- -
------------------- ------
--- 在这个例子中，我们使用了许多选项。你会发现，这个例子使用了更多的选项：
- placeholder: 文本框为空时的提示信息
- label: 文本框整个 Label 中的文本
- secondaryPlaceholder: 当文本框为空且标签已经存在时的文本
- data: 初始时可接受 tag 和可以拥有 image 的数据
事件处理程序
请注意，我们在 Chips 实例上注册了几个事件处理程序。这些处理程序可能包括：
- chips-focus: 每当焦点在 chips 上时触发
- chips-blur: 每当焦点从 chips 上移开时触发
- chips-add: 每当添加新标签时触发
- chips-remove: 在从 chips 中删除标记时每次触发
- chips-select: 选择标签时每次触发
- chips-change: 更改标记时每次触发
结论
现在你知道了如何安装和使用 npm 包 mn-chips ，以及如何在自己的代码中使用它。也就是说，您不再需要从头开始编写 JavaScript。提示：在购买这样的方式之前，请务必查看 NPM 包 mn-chips 的文档，这样您就可以深入了解其功能和支持的选项。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005580381e8991b448d5262