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 集成。此包负责将 Vue 与 FormKit 核心和其他第一方包进行集成。
从 schema 或带有 "标准" FormKit 功能的 Vue 组件创建新输入,例如标签,帮助文本,验证消息和类支持。
createInput(schemaOrComponent: FormKitSchemaNode | FormKitSection | Component, definitionOptions?: Partial<FormKitTypeDefinition>): FormKitTypeDefinition;
schemaOrComponent
— 输入的实际 schema 或组件。definitionOptions
可选 — 您想要定义的 FormKitTypeDefinition 中的任何选项。defineFormKitConfig(config: DefaultConfigOptions | (() => DefaultConfigOptions)): () => DefaultConfigOptions;
config
注册 SSR 完成时的回调。如果不在服务器上下文中,则无操作。
onSSRComplete(app: App<any> | undefined, callback: CallableFunction): void;
app
— Vue 应用程序。callback
— SSR 完成后要调用的回调。对给定应用程序刷新所有使用 onSSRComplete 注册的回调。
ssrComplete(app: App<any>): void;
app
— Vue 应用程序。useConfig(config?: FormKitOptions | ((...args: any[]) => FormKitOptions)): void;
config
可选用于创建新 FormKit 节点的可组合。
useInput<Props extends FormKitInputs<Props>, Context extends SetupContext<any, any>>(props: Props, context: Context, options?: FormKitOptions): FormKitNode;
props
context
options
可选一个组件库,供 schema 使用(除了全局注册的组件)
interface FormKitComponentLibrary {
[index: string]: Component;
}
FormKit组件Vue上下文的类型定义。
interface FormKitSetupContext<Props extends FormKitInputs<Props>> {
attrs: any;
emit: FormKitEvents<Props>;
expose(exposed:{
}): void;
props:{
}&Props;
slots: Slots<Props>;
}
interface FormKitSummaryMessage {
id: string;
key: string;
message: string;
type: string;
}
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;
}
插件的配置
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;
}
defaultConfig的允许选项。
export type DefaultConfigOptions = FormKitOptions & Partial<PluginConfigs> & Record<string, unknown>;
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>;
};
Vue可以渲染的值的类型。
export type Renderable = null | string | number | boolean | VirtualNode;
可渲染项的列表。
export type RenderableList = Renderable | Renderable[] | (Renderable | Renderable[])[];
可以渲染的插槽函数。
export type RenderableSlot = (data?: Record<string, any>, key?: object) => RenderableList;
插槽对象
export type RenderableSlots = Record<string, RenderableSlot>;
FormKit的插槽类型定义,这不是直接使用的意图。
export type Slots<Props extends FormKitInputs<Props>> = InputType<Props> extends keyof FormKitInputSlots<Props> ? FormKitInputSlots<Props>[InputType<Props>] : {};
Vue中VNode的实际签名。
export type VirtualNode = VNode<RendererNode, RendererElement, {
[key: string]: any;
}>;