多步输入插件

• 介绍
• 安装
• 用法
• 标签页样式
• 步骤标签
• 允许不完整步骤
• 有效步骤图标
• 自定义步骤操作
• beforeStepChange 事件
• Props & Attributes（多步骤）
• Props & Attributes（步骤）
• 章节

介绍

FormKit附带了一个来自@formkit/addons包的第一方多步输入插件。此输入允许您构建向导或轻松地将表单分为多个步骤。将表单分为多个步骤可以通过使它们保持小巧且易于接近，而不是一次列出所有输入，从而提高较大表单的用户体验。

安装

首先，从@formkit/addons中导入createMultiStepPlugin以及相应的样式。样式完全独立，不依赖于FormKit附带的genesis主题。这意味着，如果您使用Tailwind为输入设置样式，那么在multi-step输入类型中包装的输入样式仍将按预期显示。

// formkit.config.js
import { defaultConfig } from '@formkit/vue'
import { createMultiStepPlugin } from '@formkit/addons'
import '@formkit/addons/css/multistep'

const config = defaultConfig({
  plugins: [createMultiStepPlugin()],
})

export default config

multi-step输入类型实际操作的快速演示：

用法

createMultiStepPlugin函数为您注册了两个新的输入类型，供您与FormKit组件一起使用。

• multi-step：整个多步输入的包装组。此输入跟踪哪个步骤处于活动状态，每个步骤的验证和错误，并且其直接子级应仅包含step输入
• step：多步输入中给定步骤的包装组。应仅作为multi-step输入的直接子级。其子级将作为步骤的内容呈现。

将这些输入一起使用就像在多步表单中的步骤中包含您想要呈现的任何标记一样简单。

<FormKit type="multi-step">
  <FormKit type="step" name="stepOne">
    <!-- 步骤一的内容在这里！ -->
  </FormKit>
</FormKit>

开箱即用的父multi-step输入将跟踪每个子step输入中包含的输入的有效性，并阻止在当前步骤有效之前前进到下一个step。如果用户尝试在满足当前步骤的输入验证之前前进到下一步或提交表单，则阻止验证和错误的总计数将显示在当前步骤名称旁边。

标签页样式

multi-step 输入提供了两种可用的标签页样式。

• tab：默认的标签页体验。每个步骤名称都显示在一个带有活动状态的标签中。错误计数显示在标签的右上角。
• progress：一个进度条样式，其中每个步骤都是总步骤时间线上的一个“节点”。使用此显示模式，您还可以使用 hide-progress-labels 属性来隐藏步骤名称。

步骤标签

默认情况下，multi-step 输入将使用其子 step 输入的 name 属性来为步骤生成标签。如果您希望更好地控制步骤名称的显示，可以使用 label 属性。您还可以使用 previous-label 和 next-label 属性自定义在 stepActions 部分中显示的标签。

• label：应显示在多步骤标签中的步骤名称的替代。
• previous-label：stepPrevious 按钮标签的替代，默认为 Back。
• next-label：stepNext 按钮标签的替代，默认为 Next。

允许不完整步骤

默认情况下，multi-step 输入将允许在当前步骤或当前步骤与目标步骤之间的步骤具有阻止验证消息的情况下，前进到后面的步骤。要阻止用户跳过，请将 allow-incomplete 属性设置为 false。

有效步骤图标

当一个步骤完成且没有验证错误时，multi-step 输入将默认渲染一个检查图标，显示该步骤有效且不需要采取更多操作。valid-step-icon 是一个 FormKit 图标，可以通过属性像其他 FormKit 图标一样进行更改。

您可以：

• 更改 multi-step 输入上的 valid-step-icon，以更改输入内所有步骤的图标。
• 更改 step 输入上的 valid-step-icon，以更改或覆盖该步骤的图标。

自定义步骤操作

在 multi-step 输入中的每个 step 都有默认的按钮用于在步骤之间移动。默认情况下，multi-step 中的第一个 step 只会渲染一个 stepNext 操作按钮，最后一个 step 只会有一个 stepPrevious 操作按钮。这使得多步骤可以作为一个独立的组在更大的表单上下文中使用。

如果您想在 multi-step 中添加一个自定义操作，例如表单提交 —— 如果您将 multi-step 作为整个表单使用，这是非常有用的 —— 您可以通过覆盖所需步骤上的 stepNext 插槽来实现。在这种情况下，我们将在 multi-step 输入的最后一步中添加一个 submit 输入以提交表单。

stepNext 和 stepPrevious 部分可以访问 incrementStep 处理程序 —— 它返回一个可调用的函数 —— 以实现编程导航。

beforeStepChange 事件

有时您需要在步骤之间对表单数据进行_操作_。也许您想要将每个步骤独立提交给后端，或者您需要记录分析事件以确定用户在表单中进行了多远。在这种情况下，您可以使用 beforeStepChange 事件。beforeStepChange 接受一个函数，并提供一个带有以下键的上下文对象：

• currentStep：用户即将离开的当前活动步骤节点上下文对象。
• targetStep：用户即将导航到的步骤节点上下文对象。
• delta：步骤之间的距离。正整数表示向前迈进，负整数表示向后迈进。

您的 beforeStepChange 函数应返回一个 Boolean。返回 false 将_阻止_步骤更改发生。

beforeStepChange 可以用于您的 multi-step 输入，在这种情况下，它将应用于_所有_步骤。此外，您还可以在特定的 step 输入上使用 beforeStepChange，仅在从分配了该函数的步骤导航时运行您的函数。在 step 上应用的 beforeStepChange 将覆盖任何在父 multi-step 上设置的 beforeStepChange（如果存在）。

Props & Attributes（多步骤）

Props & Attributes（步骤）

章节