示例

一个包含有实际可用代码的广泛示例集合,您可以在今天的项目中使用。

表单与结构

为 FormKit 提供的提交按钮添加类

form 类型会自动添加一个提交按钮。添加类以便其 UI 可以符合您项目的风格

使用列表重复输入

使用 list 类型,我们可以创建可以有多个值的重复输入。这个示例使用循环让用户添加/删除电子邮件地址。

架构

根据另一个输入的值有条件地显示输入

使用 FormKitSchema 组件根据另一个输入的值有条件地显示输入(带有验证规则)。

从架构构建的多步骤表单

使用 FormKitSchema 组件从多步骤表单指南渲染多步骤表单。

自定义架构提交按钮,带有禁用状态和加载旋转器

创建一个自定义的架构驱动的提交按钮,该按钮在表单提交时动态禁用,并提供一个加载旋转器。

为文本区域添加最大长度倒计时

基于文本区域的 maxlength 属性,添加一个简单的剩余字符倒计时和悬停工具提示

插件

为所有必填输入的标签添加星号

使用插件在具有“必填”规则的输入的标签区域添加星号(*)。

将数字输入值从字符串转换为数字

使用插件将字符串值转换为数字。如果您希望类型为 number 的输入返回一个 JS Number 原始值,这将非常有用。

在验证消息前添加图标

使用插件通过扩展架构定义,在验证消息前添加图标。

将初始值设置为空字符串而不是未定义

使用插件将所有初始输入值设置为一个空字符串 "" 而不是 undefined

为 'button' 类型输入添加手动切换的加载旋转器

使用插件允许 button 系列中的输入具有一个加载旋转器,该旋转器可以通过新的 loading 属性随意切换。

根据 id 自动设置输入的名称、标签和帮助文本

使用插件根据 id 自动设置输入的 namelabelhelp 属性。减少在 HTML 中重复的属性声明。

添加用于 @testing-library 等库的测试属性

一个插件,为测试库添加了带有节点 id 的属性 data-testid

滚动到表单上的第一个验证或错误。

一个插件,在提交时或添加后端错误时自动滚动到页面上的第一个错误。

输入

带有自定义步进按钮的数字输入

一个带有 +1 和 -1 步进按钮的自定义输入。使用 createInput() 制作。

带有货币选择器的货币输入

一个简单的自定义输入,允许用户选择货币并输入数值。使用 createInput() 制作。

在标签中添加链接(<a> 标签)

使用插槽或 :sections-schema 功能来修改标签的 HTML。

根据另一个输入的值条件更新选择输入的选项

根据另一个输入的值条件更新 select 输入的 options

将单选输入选项样式设置成卡片样式

仅使用新样式(本例中为 Tailwind 类)将卡片样式应用于默认的 FormKit 单选输入结构。

用户界面

为异步验证规则添加加载指示器

当一个异步验证规则正在等待验证时,在你的输入中添加一个加载旋转指示器。

在表单变更前保持提交按钮禁用

只有当用户更改了表单内的任何值时才启用保存/提交按钮。

为验证消息添加过渡效果

通过使用 FormKit 的 :sections-schema 注入 Vue TransitionGroup 组件,为验证消息添加过渡效果。

带有 Nuxt、FormKit 和 Tailwind 的起始项目

一个在 StackBlitz 上的带有 Nuxt、FormKit 和 Tailwind CSS 的工作起始项目。

根据输入的状态生成动态类

使用 classes 配置对象和 FormKit 属性,根据输入状态生成动态类。对于 Tailwind 和其他 CSS 实用程序库很有帮助。

使用“特性”创建 FormKit 输入的响应式 UI 变体

创建 FormKit 输入(如按钮)的 UI 变体,这些变体会根据组件中的响应式数据更新。