背景
在前端开发中，有很多需要实现标签式输入的场景，比如说邮件地址自动补全、标签选择等等。在 Aurelia 框架中，有一个方便实现这样功能的 npm 包，叫做 aurelia-chips。在本文中，我们将详细介绍 aurelia-chips 的使用方法，并提供示例代码。
安装
要使用 aurelia-chips 包，需要先安装 Aurelia CLI，然后在项目根目录中执行以下命令：
npm install aurelia-chips bootstrap --save-dev
其中，bootstrap 是可选的，用于为输入框添加样式。
使用
在安装完 aurelia-chips 包之后，在需要使用的页面中添加以下代码：
<template> <compose view-model="aurelia-chips/chips" value.bind="tagInput" header-text="Choose your tags" placeholder="Add a tag" css-class="form-control"></compose> </template>
其中，compose 标签是 Aurelia 框架中的组件，用于动态渲染其他组件。在这里，我们使用 compose 标签来渲染 aurelia-chips 组件。
上述代码中的 value.bind 属性用于绑定当前输入框中已选择的标签，header-text 属性用于设置输入框的标题，placeholder 属性用于设置输入框的占位符，css-class 属性用于设置输入框的样式。
事件
aurelia-chips 组件提供了多个事件，我们可以通过添加相应的事件方法来实现相应的功能。比如说，如果我们想在用户输入标签时，自动向后端请求匹配的标签，则可以在组件中添加以下事件方法：
tagInputChanged(newValue, oldValue) {
// . . . 根据 newValue 向后端请求匹配的标签 . . .
}在上述代码中，tagInputChanged 方法是 aurelia-chips 组件提供的事件方法，可以在用户输入标签时自动触发。newValue 参数保存了当前输入框中的文本，可以用于后续的标签匹配逻辑。
高级用法
在实际项目中，我们可能需要对 aurelia-chips 组件进行更加个性化的配置或扩展。比如说，我们可能需要在每个标签后面添加删除按钮，或者在选择标签后自动跳转到下一个输入框。对此，我们可以通过继承 aurelia-chips 组件并添加自定义实现来实现这些需求。
下面是一个扩展 aurelia-chips 的示例代码：
-- -------------------- ---- -------
------ - ------ - ---- -------------------------------
------ - -------------- -------- - ---- --------------------
------ - ----------- - ---- ------------------------
------ - ----- - ---- ---------------------------
---------------------- ------------
------ ----- ----------- ------- ----- -
--------- ------------
-------------------------- ------------ -
---------------------
---------------- - ------------
-
----------------------- -
-- - - - -- --------------------- --------- - - -
-
------------------ -
-- - - - -- ------------ --------- - - -
-- ------------------ -
------------------ ---- ---------- ---
-
-
-在上述示例代码中，我们定义了一个 CustomChips 类，并继承了基础的 Chips 类。在 CustomChips 类中，我们重载了 configureAutoComplete 和 onDeleteChip 两个方法，分别用于重写 aurelia-chips 组件中的自动补全逻辑和删除标签逻辑。另外，我们新增了 onDeleteTag 方法，用于在删除标签时自动触发自定义的事件。
总结
通过本文的介绍，我们了解了 npm 包 aurelia-chips 的基本使用方法和部分高级用法。在实际应用中，我们可以根据项目需求，对 aurelia-chips 组件进行个性化定制和扩展，实现更加丰富和高效的标签式输入功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055dc981e8991b448db837