NPM 包 Aurelia-Bootstrap-Tagsinput 使用教程-JavaScript中文网-JavaScript教程资源分享门户

NPM 包 Aurelia-Bootstrap-Tagsinput 使用教程

在前端开发过程中，我们经常需要使用一些库或框架来提升代码的效率，而 NPM 包是十分常用的资源。今天，我将会介绍一个非常实用的 NPM 包，它就是 Aurelia-Bootstrap-Tagsinput。

什么是 Aurelia-Bootstrap-Tagsinput

Aurelia-Bootstrap-Tagsinput 是一个基于 Bootstrap 的标签输入框组件，可以让用户方便地输入和管理多个标签。它提供了简单易懂的 API 和事件处理，支持键盘快捷键和移动设备触摸操作。此组件可在 Aurelia 框架下使用。

该组件的主要特点如下：

支持内置数据源和自定义数据源
支持异步加载数据源
支持标签限制数量
支持键入标签的自动提示
支持标签的取消
支持标签匹配

安装 Aurelia-Bootstrap-Tagsinput

我们可以通过 npm 进行安装：

--- ------- --------------------------- ------

当然，你需要在 Aurelia 项目中加入如下依赖：

--------------- -
    ------------------------------ --------
-

使用 Aurelia-Bootstrap-Tagsinput

首先，我们需要在 HTML 中添加标签输入框组件：

-------------------- ----------------------------------------

其中 value.bind 属性将会绑定数据到 tags 数组中。

然后，我们需要在 aurelia.json 文件中添加以下内容：

-
    ------- ----------------------
    ------- --------------------------------------------
    ------- -------------------------
-

这将会将 Bootstrap 和 jQuery 库引入到我们的应用程序中。

现在，我们可以使用 Aurelia-Bootstrap-Tagsinput 了。

------ -------- ---- --------------------
------ ----------------------
------ --------------------------------------------------

----------------
------ ----- --------------- -
    -------------------- -
        ------------ - --------
        --------- - ----- --- ---- --- ---- ----
    -
-

API 和事件

组件的 API 和事件如下：

typeahead.source: 内置或自定义数据源
maxTags: 可以添加的标签数的最大值
trimValue: 删除标记前后的空格。
transform: 对输入值进行转换
allowDuplicates: 允许添加重复标签
cancelConfirmKeysOnEmpty: 如果空标签自动被删除，则取消确认键。如果为“true/false”则允许/不允许
onBeforeTagAdded: 添加标签之前触发事件处理
onTagAdded: 添加标签后触发事件处理
onBeforeTagRemoved: 删除标签之前触发事件处理
onTagRemoved: 删除标签后触发事件处理

示例代码

下面是一个完整的示例代码，你可以将其直接复制到你的 Aurelia 项目中进行测试。此例子展示了如何使用 Bootstrap 标签输入框组件添加和删除标签并将其存储在一个数组中。

----------
    ------ ------------------------
    -------------------- ----------------------------------------
-----------

------ -------- ---- --------------------
------ ----------------------
------ ---------------------------------------------------

----------------
------ ----- --------------- -
    -------------------- -
        ------------ - --------
        --------- - ----- --- ---- --- ---- ----
        -------------------- - ------
    -

    ---------- -
        ------------------------------------- ------- -- -
            -- ---------------------- -- ------------------------------- -
                ------------ - -----
            -
        ---
    -
-

这是一个非常简单但使用广泛的组件，它将会为你提供方便实用且高效的标签输入体验。希望你在使用此组件的过程中有所帮助。

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/6005626781e8991b448dfafe