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/vue

简介

官方的 FormKit/Vue 集成。此包负责将 Vue 与 FormKit 核心和其他第一方包进行集成。

功能

createInput()

从 schema 或带有 "标准" FormKit 功能的 Vue 组件创建新输入,例如标签,帮助文本,验证消息和类支持。

签名

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

参数

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

返回

FormKitTypeDefinition

defineFormKitConfig()

签名

defineFormKitConfig(config: DefaultConfigOptions | (() => DefaultConfigOptions)): () => DefaultConfigOptions;

参数

  • config

onSSRComplete()

注册 SSR 完成时的回调。如果不在服务器上下文中,则无操作。

签名

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

参数

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

ssrComplete()

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

签名

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

参数

  • app — Vue 应用程序。

useConfig()

签名

useConfig(config?: FormKitOptions | ((...args: any[]) => FormKitOptions)): void;

参数

  • config 可选

useInput()

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

签名

useInput<Props extends FormKitInputs<Props>, Context extends SetupContext<any, any>>(props: Props, context: Context, options?: FormKitOptions): FormKitNode;

参数

  • props
  • context
  • options 可选

返回

FormKitNode

TypeScript

FormKitComponentLibrary

一个组件库,供 schema 使用(除了全局注册的组件)

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

FormKitSetupContext

FormKit组件Vue上下文的类型定义。

interface FormKitSetupContext<Props extends FormKitInputs<Props>> {
    attrs: any;
    emit: FormKitEvents<Props>;
    expose(exposed:{
        
    }): void;
    props:{
        
    }&Props;
    slots: Slots<Props>;
}

FormKitSummaryMessage

interface FormKitSummaryMessage {
    id: string;
    key: string;
    message: string;
    type: string;
}

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;
    locale: string;
    locales: FormKitLocaleRegistry;
    messages: Record<string, Partial<FormKitLocale>>;
    rules: Record<string, FormKitValidationRule>;
    theme: string;
}

DefaultConfigOptions

defaultConfig的允许选项。

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

FormKitComponent

FormKit组件的TypeScript定义。

export type FormKitComponent = <Props extends FormKitInputs<Props>>(props: Props & VNodeProps & AllowedComponentProps & ComponentCustomProps, context?: Pick<FormKitSetupContext<Props>, 'attrs' | 'emit' | 'slots'>, setup?: FormKitSetupContext<Props>) => VNode<RendererNode, RendererElement, {
    [key: string]: any;
}> & {
    __ctx?: FormKitSetupContext<Props>;
};

Renderable

Vue可以渲染的值的类型。

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

RenderableList

可渲染项的列表。

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

RenderableSlot

可以渲染的插槽函数。

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

RenderableSlots

插槽对象

export type RenderableSlots = Record<string, RenderableSlot>;

Slots

FormKit的插槽类型定义,这不是直接使用的意图。

export type Slots<Props extends FormKitInputs<Props>> = InputType<Props> extends keyof FormKitInputSlots<Props> ? FormKitInputSlots<Props>[InputType<Props>] : {};

VirtualNode

Vue中VNode的实际签名。

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