在前端开发过程中，我们经常需要使用一些库或框架来提升代码的效率，而 NPM 包是十分常用的资源。今天，我将会介绍一个非常实用的 NPM 包，它就是 Aurelia-Bootstrap-Tagsinput。
什么是 Aurelia-Bootstrap-Tagsinput
Aurelia-Bootstrap-Tagsinput 是一个基于 Bootstrap 的标签输入框组件，可以让用户方便地输入和管理多个标签。它提供了简单易懂的 API 和事件处理，支持键盘快捷键和移动设备触摸操作。此组件可在 Aurelia 框架下使用。
该组件的主要特点如下：
- 支持内置数据源和自定义数据源
- 支持异步加载数据源
- 支持标签限制数量
- 支持键入标签的自动提示
- 支持标签的取消
- 支持标签匹配
安装 Aurelia-Bootstrap-Tagsinput
我们可以通过 npm 进行安装：
npm install aurelia-bootstrap-tagsinput --save
当然，你需要在 Aurelia 项目中加入如下依赖：
"dependencies": {
"aurelia-bootstrap-tagsinput": "^1.0.0"
}使用 Aurelia-Bootstrap-Tagsinput
首先，我们需要在 HTML 中添加标签输入框组件：
<bootstrap-tagsinput value.bind="tags"></bootstrap-tagsinput>
其中 value.bind 属性将会绑定数据到 tags 数组中。
然后，我们需要在 aurelia.json 文件中添加以下内容：
{
"name": "bootstrap-tagsinput",
"path": "../node_modules/bootstrap-tagsinput/dist/",
"main": "bootstrap-tagsinput.min"
}这将会将 Bootstrap 和 jQuery 库引入到我们的应用程序中。
现在，我们可以使用 Aurelia-Bootstrap-Tagsinput 了。
-- -------------------- ---- -------
------ -------- ---- --------------------
------ ----------------------
------ --------------------------------------------------
----------------
------ ----- --------------- -
-------------------- -
------------ - --------
--------- - ----- --- ---- --- ---- ----
-
-API 和事件
组件的 API 和事件如下：
typeahead.source: 内置或自定义数据源maxTags: 可以添加的标签数的最大值trimValue: 删除标记前后的空格。transform: 对输入值进行转换allowDuplicates: 允许添加重复标签cancelConfirmKeysOnEmpty: 如果空标签自动被删除，则取消确认键。如果为“true/false”则允许/不允许onBeforeTagAdded: 添加标签之前触发事件处理onTagAdded: 添加标签后触发事件处理onBeforeTagRemoved: 删除标签之前触发事件处理onTagRemoved: 删除标签后触发事件处理
示例代码
下面是一个完整的示例代码，你可以将其直接复制到你的 Aurelia 项目中进行测试。此例子展示了如何使用 Bootstrap 标签输入框组件添加和删除标签并将其存储在一个数组中。
<template>
<label for="tags">Tags:</label>
<bootstrap-tagsinput value.bind="tags"></bootstrap-tagsinput>
</template>-- -------------------- ---- -------
------ -------- ---- --------------------
------ ----------------------
------ ---------------------------------------------------
----------------
------ ----- --------------- -
-------------------- -
------------ - --------
--------- - ----- --- ---- --- ---- ----
-------------------- - ------
-
---------- -
------------------------------------- ------- -- -
-- ---------------------- -- ------------------------------- -
------------ - -----
-
---
-
-这是一个非常简单但使用广泛的组件，它将会为你提供方便实用且高效的标签输入体验。希望你在使用此组件的过程中有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005626781e8991b448dfafe