Taglist

• 基本示例
• 定义选项
• 筛选
• 空消息
• 允许新值
• 最大值
• 选择后关闭
• 插槽
• 加载选项
  • 搜索参数
  • 页面和hasNextPage参数
  • 加载样式
  • 选项加载器
• 完整示例
• Props & Attributes

基本示例

taglist 输入允许用户搜索选项列表并应用任意数量的标签。用户还可以拖放标签以重新排序：

定义选项

options prop 可以接受三种不同格式的值：

• 具有 value 和 label 键的对象数组（参见上面的示例）
• 一个字符串数组 'A', 'B', 'C'
• 一个具有键值对的对象字面量 { a: 'A', b: 'B', c: 'C' }
• 返回上述任何内容的函数

筛选

标签列表输入将使用其自己的内部搜索功能筛选选项。您可以通过为 filter prop 提供一个自己的函数来替换此搜索功能。您的函数将接收两个参数，正在迭代的 option 和当前的 search 值：

空消息

默认情况下，当在筛选过程中找不到搜索结果时，标签列表输入将关闭列表框。您可以通过为 empty-message prop 分配一个消息来更改此行为，以在找不到结果时显示：

允许新值

与下拉或自动完成输入不同，标签列表输入允许您输入任意值（不在选项列表中的值）。这对于即时创建新标签很有用。要启用此功能，请将 allow-new-values prop 设置为 true。

最大值

max prop 允许您限制可以选择的选项数量。当达到 max 限制时，标签列表输入将禁用列表框：

选择后关闭

如果您希望标签列表的列表框在选择之间保持打开状态，请将 close-on-select prop 设置为 false：

插槽

就像下拉输入或自动完成输入，标签列表输入允许您使用插槽来自定义选项列表和选定选项的外观和感觉，通过利用无渲染组件模式。

在这个例子中，我们将使用tag插槽来自定义标签的外观：

加载选项

您可以将options属性分配给一个函数，而不是将静态选项列表传递给options属性。这样做在需要从API或其他来源加载选项时非常有用。

搜索参数

在这个例子中，我们将把options属性分配给searchMovies函数。这样做的话，searchMovies将接收context对象作为参数。在这个context对象中有一个search属性，它是当前的搜索值。为了执行我们的搜索，我们将使用search值作为API请求的查询参数：

页面和hasNextPage参数

您可能会遇到的一个场景是需要通过分页API进行搜索。这可以通过引用与之前相同的context对象来完成。在这个对象中，我们可以使用page和hasNextPage属性。page属性是当前的页码，hasNextPage属性是在有更多页面需要加载时要调用的函数：

加载样式

您可以将loadOnScroll属性设置为true，而不是要求用户单击加载更多按钮来加载其他选项，这样将在您滚动到选项列表底部时分页选项。

选项加载器

重新水合值

FormKit的标签列表输入还提供了一个optionLoader属性，允许您重新水合不在选项列表中的值。在这个例子中，我们将为标签列表提供一个初始值（一个电影ID），并将optionLoader分配给一个将向API发出请求以获取电影的函数：

请注意，在上面的例子中，optionLoader函数传递了两个参数：选定选项的value（在这种情况下，是电影ID）和cachedOption。cachedOption用于防止不必要的查找。如果cachedOption不是null，这意味着已经加载了选定的选项，您可以直接返回cachedOption。

获取额外数据

除了使用 optionLoader prop 重新生成不在选项列表中的值之外，您还可以使用 optionLoader 执行查找以获取额外数据，甚至只是修改选项的当前标签。在此示例中，我们将使用 optionLoader 获取电影的海报图像：

完整示例

现在让我们通过利用 tag 插槽进行自定义标记，并将 options prop 设置为一个将从 API 返回电影页面的函数，来结合我们迄今为止学到的知识：

Props & Attributes