Dropdown

• 基本示例
• 定义选项
• 空消息
• 插槽
  • 选项插槽
  • 选择插槽
• 加载选项
  • 单个请求
  • 多个页面
  • 选项加载器
  • 滚动加载
• 完整示例
• 超滚动
• 属性和属性
• 部分
  • 外部结构
  • 内部列表框结构

基本示例

dropdown 输入允许用户从可自定义的选项列表中选择一个值：

定义选项

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

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

空消息

如果没有传递选项，默认情况下，下拉输入将以禁用状态呈现。或者，您可以传递 empty-message prop 一个消息，以在没有可用选项时显示：

插槽

与原生选择元素不同，dropdown 输入允许您使用标记自定义选项列表。

选项插槽

dropdown 输入允许您使用 option 插槽自定义每个选项的外观和感觉。在此示例中，我们使用 option 插槽显示每个选项的资产；徽标和名称：

选择插槽

如果您只想自定义所选选项的显示，请使用 selection 插槽：

加载选项

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

单个请求

假设我们有一个 API 端点，它返回了给定 dropdown 输入所需的所有选项。以下是我们如何编写 dropdown 输入以从单个请求加载选项的示例：

在上面的示例中，我们将 options prop 分配给 loadHorrorMovies 函数。请求后，我们遍历结果以确保返回具有显式 value 和 label 属性的对象数组。

多个页面

如何从需要进行多次请求以执行分页的 API 中加载选项？当将函数设置为 options prop 时，它将作为参数传递给 FormKit 节点的 context 对象。在此 context 对象中有 page 和 hasNextPage 属性。page 属性是当前页码，hasNextPage 属性是在有更多页面要加载时要调用的函数：

在上面的示例中，我们在确定有更多页面要加载时调用 hasNextPage。完成后，FormKit 在渲染的选项列表末尾附加一个 Load more 选项，并自动递增其 page 属性。当用户选择 Load more 选项时，将再次调用分配给 options prop 的函数，过程重复。

选项加载器

重新注入值

FormKit 的下拉输入还提供了一个 optionLoader prop，允许您重新注入不在选项列表中的值。在此示例中，我们将为自动完成提供一个初始值（电影 ID），并将 optionLoader 分配给一个将向 API 发出请求以获取电影的函数：

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

获取其他数据

您可以使用 optionLoader 执行查找以获取其他数据，而不是使用 optionLoader prop 重新注入不在选项列表中的值。在此示例中，在选择一个选项后，我们将执行查找以加载所选选项的电影评论：

滚动加载

如果您希望用户在不必单击选项列表底部的 Load more 选项的情况下加载更多选项，您可以将 load-on-scroll prop 设置为 true，然后我们的函数 loadCurrentlyPopularMovies 将再次被调用：

完整示例

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

超滚动

在使用具有静态选项的下拉菜单时，FormKit 的下拉菜单还具有一个名为 overscroll 的独特功能。在这个例子中，我们将看到将 overscroll 设置为 true 时的行为：

属性和属性

部分

您可以通过使用该部分的"key"来定位输入的特定部分，从而可以修改该部分的类、HTML（通过:sections-schema）或内容（通过插槽）。了解更多关于部分的信息，请点击这里。

外部结构

内部列表框结构

下面是上图中的内部选项列表（listbox）结构：