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

一个 可见 消息对象(类型不是 uiui)。此对象的键是消息名称,值是一个核心消息对象。例如,对于显示单个失败验证消息的输入,此对象将如下所示:

{
  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部分键)可以使用此对象。对象包含labelvalue,有时还包含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 属性提供的输入类型。在输入库中查找定义时应引用的值。此值的示例包括:textselectautocomplete

ui

一个可见消息的对象(由 key 键入),类型为 ui,可用于界面。这允许使用本地化文本于界面元素上。

classes

一个用于请求类的 Proxy 对象。该对象允许模式作者请求任何部分并获得生成的类名。例如 $classes.input 会(默认情况下,无需额外配置)返回 formkit-input,而 $classes.foobar 会返回 formkit-foobar