上下文对象

介绍

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部分键)。该对象包含labelvalue和有时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 属性提供的输入类型。这是在查找输入库中的定义时应引用的值。例如:textselectautocomplete

ui

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

classes

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