@formkit/vue

介绍

官方的FormKit/Vue集成。该包负责将Vue与FormKit核心和其他官方包集成。

函数

createInput()

根据模式或带有“标准”FormKit功能的Vue组件创建新的输入,例如标签、帮助文本、验证消息和类支持。

签名

createInput(schemaOrComponent: FormKitSchemaNode | FormKitSection | Component, definitionOptions?: Partial<FormKitTypeDefinition>): FormKitTypeDefinition;

参数

  • schemaOrComponent — 输入的实际模式或组件。
  • definitionOptions 可选 — 您想要定义的FormKitTypeDefinition中的任何选项。

返回值

FormKitTypeDefinition

onSSRComplete()

注册一个回调函数,用于在SSR完成时调用。如果不在服务器上下文中,则不执行任何操作。

签名

onSSRComplete(app: App<any> | undefined, callback: CallableFunction): void;

参数

  • app — Vue应用程序。
  • callback — SSR完成后要调用的回调函数。

ssrComplete()

刷新与给定应用程序注册的所有onSSRComplete回调。

签名

ssrComplete(app: App<any>): void;

参数

  • app — Vue应用程序。

useInput()

用于创建新的FormKit节点的组合函数。

签名

useInput(props: FormKitComponentProps, context: SetupContext<any>, options?: FormKitOptions): FormKitNode;

参数

  • props
  • context
  • options 可选

返回值

FormKitNode

TypeScript

FormKitComponentLibrary

模式可用的组件库(除了全局注册的组件)

interface FormKitComponentLibrary {
    [index: string]: Component;
}

FormKitComponentProps

组件的FormKit属性

interface FormKitComponentProps {
    classes?: Record<string, string | Record<string, boolean> | FormKitClasses>;
    config: Record<string, any>;
    dynamic?: boolean;
    errors: string[];
    index?: number;
    inputErrors: Record<string, string | string[]>;
    modelValue?: any;
    name?: string;
    parent?: FormKitNode;
    plugins: FormKitPlugin[];
    sync?: boolean;
    type?: string | FormKitTypeDefinition;
    validation?: any;
}

FormKitVuePlugin

FormKit插件的全局实例。

interface FormKitVuePlugin {
    clearErrors: (formId: string) => void;
    get: (id: string) => FormKitNode | undefined;
    reset: (formId: string, resetTo?: unknown) => void;
    setErrors: (formId: string, errors: string[] | Record<string, string | string[]>, inputErrors?: string[] | Record<string, string | string[]>) => void;
    setLocale: (locale: string) => void;
    submit: (formId: string) => void;
}

PluginConfigs

插件的配置

interface PluginConfigs {
    iconLoader: FormKitIconLoader;
    iconLoaderUrl: FormKitIconLoaderUrl;
    icons: Record<string, string | undefined>;
    inputs: FormKitLibrary;
    locales: FormKitLocaleRegistry;
    messages: Record<string, Partial<FormKitLocale>>;
    rules: Record<string, FormKitValidationRule>;
    theme: string;
}

DefaultConfigOptions

defaultConfig的允许选项。

type DefaultConfigOptions = FormKitOptions & Partial<PluginConfigs> & Record<string, unknown>;

Renderable

可以由Vue渲染的值的类型。

type Renderable = null | string | number | boolean | VirtualNode;

RenderableList

可渲染项的列表。

type RenderableList = Renderable | Renderable[] | (Renderable | Renderable[])[];

RenderableSlot

可以渲染的插槽函数。

type RenderableSlot = (data?: Record<string, any>, key?: object) => RenderableList;

RenderableSlots

插槽的对象

type RenderableSlots = Record<string, RenderableSlot>;

VirtualNode

Vue中VNode的实际签名。

type VirtualNode = VNode<RendererNode, RendererElement, {
    [key: string]: any;
}>;