FormKit输入使用一个响应式对象,将数据暴露给模板插槽、规则和定义每个输入的模式。这被称为context
对象,可以在每个输入的核心node
对象中找到,位于node.context
。上下文对象具有以下属性:
_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 is required',
// 如果此消息旨在显示给最终用户 - 这并不意味着消息是活动可见的 - 这由{type}-visibility规则决定,但如果为false,则永远不会显示给用户。
visible: true
}
}
node
当前输入的底层核心节点。此对象在Vue的上下文中不是响应式的。
options
对于接受选项属性的输入,这是一个规范化的选项对象数组。
option
对于接受选项属性的输入,此对象可用于迭代内部的section keys(例如,具有多个复选框的checkbox
输入上的label
部分键)。该对象包含label
、value
和有时attrs
:
{
value: 'foo',
label: 'Foo',
attrs: {
disabled: true
}
}
state
输入的当前状态:
{
/**
* 输入是否已模糊。
*/
blurred: boolean
/**
* 当满足以下条件时为true:
*
* 要么:
* - 输入具有验证规则
* - 验证规则全部通过
* - 输入没有错误
* 或者:
* - 输入没有验证规则
* - 输入没有错误
* - 输入是脏的并且有值
*
* 这不适用于表单/组/列表,而是适用于单个输入。想象一下,在每个输入旁边放置一个绿色复选框,当用户正确填写它时 - 这就是这些用途。
*/
complete: boolean
/**
* dirty-behavior属性控制如何设置此状态。默认情况下,如果对输入进行了任何更改,则认为其是脏的,但一旦进行了更改并且dirty为`true`,它就会停止检查。
*
* 或者,可以将dirty-behavior属性设置为`compare`,它将在每次更改后比较当前值和初始值之间的更改 - 这意味着如果输入返回到其初始值,dirty将再次变为`false`。
*/
dirty: boolean
/**
* 如果在输入上放置了显式错误,或者在组/表单/列表的情况下,如果任何子项上有错误,则为true。
*/
errors: boolean
/**
* 输入是否具有验证规则。与这些验证规则的状态无关。
*/
rules: boolean
/**
* 输入是否完成了其内部去抖动周期,并且该值已提交给表单。
*/
settled: boolean
/**
* 表单是否已提交。
*/
submitted: boolean
/**
* 输入(或组/表单/列表)是否通过所有验证规则。对于组、表单和列表,这包括其所有子项的验证状态。
*/
valid: boolean
/**
* == 由@formkit/validation插件添加 - 包含在defaultConfig中 ==
* 输入(或组/表单/列表)当前是否正在验证规则 - 包括异步验证规则。对于组、表单和列表,这包括其所有子项的验证状态。
*/
validating?: boolean
/**
* 是否满足了验证可见性,并且应显示任何验证消息。
*/
validationVisible: boolean
}
type
type
属性提供的输入类型。这是在查找输入库中的定义时应引用的值。例如:text
、select
或 autocomplete
。
ui
一个可见消息的对象(由 key
键控),类型为 ui
,可用于界面上的元素。这允许在界面元素上使用本地化文本。
classes
用于请求类的代理对象。该对象允许模式作者请求任何部分,并获得一个生成的类名。例如,$classes.input
(默认情况下,无需其他配置)将返回 formkit-input
,而 $classes.foobar
将返回 formkit-foobar
。