Introducing KickStart — AI generated FormKit forms in seconds. Generate from a screenshot, edit with drag-and-drop or conversational AI, copy & paste as components or schema!
Try for free
FormKit 输入使用一个响应式对象向模板插槽、规则和定义每个输入的模式暴露数据。这就是所谓的 context
对象,可以在每个输入的核心 node
对象中的 node.context
找到。
上下文对象通常可以被认为是每个输入的通用数据存储。在几乎所有情况下,传递给 <FormKit>
组件的属性最终都会出现在上下文对象中。上下文对象也是传递给所有部分插槽的插槽数据。
上下文对象总是(除非另有说明)具有以下属性:
_value
FormKit 输入有两个值 — 已提交的值(node.value
)和未提交的值(node._value
)。在静止状态下,这两个值是等价的,但未提交的值是输入的未经防抖处理的原始值。
attrs
一个包含将传递给内部输入元素的任何属性的对象。
fns
一个有用的实用函数小对象,用于编写模式。
{
// 返回给定对象的长度
length: (obj: Record<PropertyKey, any>) => Number,
// 将值转换为数字
number: (value: any) => Number,
// 将值转换为字符串
string: (value: any) => String,
// 返回值的 JSON 表示
json: (value: any) => String | false,
}
handlers
模式中使用的常见输入处理程序的小对象。请记住,输入“特性”可以根据输入替换或添加处理程序。
{
// 将 state.blurred 值设置为 true
blur: () => void,
// 将 state.touched 值设置为 true
touch: () => void,
// 设置输入的值
DOMInput: (e: Event) => void
}
help
输入的帮助文本,由 help
属性提供。
id
输入的唯一标识符。除非设置了 id
属性,否则此值是自动生成的。
label
输入的标签,由 label
属性提供。
messages
一个 可见 消息对象(类型不是 ui
— ui
)。此对象的键是消息名称,值是一个核心消息对象。例如,对于显示单个失败验证消息的输入,此对象将如下所示:
{
rule_required: {
// 确定消息是否阻止表单提交
blocking: true,
// 此消息的唯一键
key: 'rule_required',
// 关于消息的额外细节,您可以在这里放置任何内容。
// 下面是验证消息的元细节:
meta: {
// 验证消息的名称(用于消息查找)
messageKey: 'required',
// 可用于 i18n 翻译的参数
i18nArgs: [{
node,
name: 'email',
args: []
}]
},
// 消息的“类型” — 通常是生成它的插件。
type: 'validation',
// 消息的值
value: 'Email 是必需的',
// 如果此消息旨在显示给最终用户 — 这并不意味着消息当前可见 — 这由 {type}-visibility 规则决定,但如果此值为 false,它将永远不会显示给用户。
visible: true
}
}
node
当前输入的基础核心节点。此对象在Vue的上下文中不是响应式的。
options
对于接受options属性的输入,这是一个标准化的选项对象数组。
option
对于接受options属性的输入,在迭代中的section keys(例如,在具有多个复选框的checkbox
输入中的label
部分键)可以使用此对象。对象包含label
、value
,有时还包含attrs
:
{
value: 'foo',
label: 'Foo',
attrs: {
disabled: true
}
}
state
输入的当前状态:
{
/**
* 如果输入已经失去焦点。
*/
blurred: boolean
/**
* 当满足以下条件时为真:
*
* 或者:
* - 输入有验证规则
* - 验证规则都通过了
* - 输入上没有错误
* 或者:
* - 输入没有验证规则
* - 输入上没有错误
* - 输入已经被修改并且有值
*
* 这不是用来在表单/组/列表上使用的,而是用在
* 个别输入上。想象在用户正确填写每个输入后
* 旁边放置一个绿色复选框 — 这就是它们的用途。
*/
complete: boolean
/**
* 一个标志,表明这个节点的“拥有者”组件是否已经
* 挂载到dom上。监听`mounted`事件来得知这个
* 标志何时改变。
*/
didMount: boolean
/**
* dirty-behavior属性控制如何设置这个状态。默认情况下,
* 如果对输入进行了任何修改,它就被认为是脏的,但是一旦
* 进行了修改并且dirty为`true`,它就停止检查。
*
* 另外,dirty-behavior属性可以设置为`compare`,这将
* 在每次修改后比较当前值和初始值之间的差异 — 这意味着如果输入
* 返回到其初始值,dirty将再次变为`false`。
*/
dirty: boolean
/**
* 如果输入上有明确的错误,或者在组、列表或表单的情况下,
* 如果任何子项上有错误,则此值为真。
*/
errors: boolean
/**
* 输入或表单的加载状态。此属性仅在输入加载时添加,
* 并在加载完成时移除。
*/
loading: true | undefined
/**
* 表示输入是否有"required"验证规则。
*/
required: boolean
/**
* 当输入有验证规则时为真。与这些验证规则的状态无关。
*/
rules: boolean
/**
* 当输入完成其内部去抖周期并且值被提交到表单时为真。
*/
settled: boolean
/**
* 如果表单已经提交。
*/
submitted: boolean
/**
* 如果输入(或组/表单/列表)通过了所有验证规则。在组、表单和列表的情况下,
* 这包括其所有子项的验证状态。
*/
valid: boolean
/**
* == 由@formkit/validation插件添加 — 包含在defaultConfig中 ==
* 如果输入(或组/表单/列表)当前正在验证规则 — 包括
* 异步验证规则。在组、表单和列表的情况下,这包括
* 其所有子项的验证状态。
*/
validating?: boolean
/**
* 如果满足了validation-visibility并且任何验证
* 消息应该被显示。
*/
validationVisible: boolean
}
type
通过 type
属性提供的输入类型。在输入库中查找定义时应引用的值。此值的示例包括:text
、select
或 autocomplete
。
ui
一个可见消息的对象(由 key
键入),类型为 ui
,可用于界面。这允许使用本地化文本于界面元素上。
classes
一个用于请求类的 Proxy 对象。该对象允许模式作者请求任何部分并获得生成的类名。例如 $classes.input
会(默认情况下,无需额外配置)返回 formkit-input
,而 $classes.foobar
会返回 formkit-foobar
。