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

介绍

FormKit的常见、可选、第一方附加功能。

您可以通过使用npm install @formkit/addonsyarn add @formkit/addons来添加此包。

函数

createAutoAnimatePlugin()

自动为每个输入添加动画:

签名

createAutoAnimatePlugin(options?: AutoAnimateOptions, animationTargets?: Record<string, string[]>): FormKitPlugin;

参数

  • options 可选AutoAnimateOptions
  • animationTargets 可选 — 输入类型的映射和应该被动画化的它们的部分的数组。

返回

FormKitPlugin

示例

import { createApp } from 'vue'
import App from 'App.vue'
import { createAutoAnimatePlugin } from '@formkit/addons'
import { plugin, defaultConfig } from '@formkit/vue'

createApp(app).use(plugin, defaultPlugin({
  plugins: [
    createAutoAnimatePlugin({
      // 可选配置
      duration: 250,
      easing: 'ease-in-out',
      delay: 0,
    },
    {
      // 可选动画目标对象
      global: ['outer', 'inner'],
      form: ['form'],
      repeater: ['items'],
    })
  ]
}))

createAutoHeightTextareaPlugin()

创建一个新的自动高度文本区插件。

签名

createAutoHeightTextareaPlugin(): FormKitPlugin;

返回

一个 FormKitPlugin

createFloatingLabelsPlugin()

创建一个新的浮动标签插件。

签名

createFloatingLabelsPlugin(FloatingLabelsOptions?: FloatingLabelsOptions): FormKitPlugin;

参数

返回

一个 FormKitPlugin

createLocalStoragePlugin()

创建一个新的保存到本地存储插件。

签名

createLocalStoragePlugin(localStorageOptions?: LocalStorageOptions): FormKitPlugin;

参数

  • localStorageOptions 可选

返回

一个 FormKitPlugin

createMultiStepPlugin()

创建一个新的多步插件。

签名

createMultiStepPlugin(options?: MultiStepOptions): FormKitPlugin;

参数

返回

一个 FormKitPlugin

TypeScript

BeforeStepChange

beforeStepChange 函数的类型。

interface BeforeStepChange {
    (data: BeforeStepChangeData): any;
}

BeforeStepChangeData

interface BeforeStepChangeData<T = unknown> {
    currentStep: FormKitFrameworkContext<T>;
    delta: number;
    nextStep: FormKitFrameworkContext<T>;
}

FloatingLabelsOptions

传递给 createFloatingLabelsPlugin 的选项

interface FloatingLabelsOptions {
    useAsDefault?: boolean;
}

FormKitMultiStepSlots

interface FormKitMultiStepSlots<Props extends FormKitInputs<Props>> {
    badge: FormKitSlotData<Props, MultiStepSlotData&{
        step: FormKitFrameworkContext;
        index: number;
    }>;
    default: FormKitSlotData<Props, MultiStepSlotData>;
    multiStepOuter: FormKitSlotData<Props, MultiStepSlotData>;
    steps: FormKitSlotData<Props, MultiStepSlotData>;
    tab: FormKitSlotData<Props, MultiStepSlotData>;
    tabLabel: FormKitSlotData<Props, MultiStepSlotData&{
        step: FormKitFrameworkContext;
        index: number;
    }>;
    tabs: FormKitSlotData<Props, MultiStepSlotData>;
    validStepIcon: FormKitSlotData<Props, MultiStepSlotData&{
        step: FormKitFrameworkContext;
        index: number;
    }>;
    wrapper: FormKitSlotData<Props, MultiStepSlotData>;
}

FormKitStepSlots

interface FormKitStepSlots<Props extends FormKitInputs<Props>> {
    default: FormKitSlotData<Props, StepSlotData>;
    stepActions: FormKitSlotData<Props, StepSlotData>;
    stepInner: FormKitSlotData<Props, StepSlotData>;
    stepNext: FormKitSlotData<Props, StepSlotData>;
    stepPrevious: FormKitSlotData<Props, StepSlotData>;
}

LocalStorageOptions

传递给 createLocalStoragePlugin 的选项

interface LocalStorageOptions {
    beforeLoad?: (payload: any) => any;
    beforeSave?: (payload: any) => any;
    control?: string;
    debounce?: number;
    key?: string | number;
    maxAge?: number;
    prefix?: string;
}

MultiStepHandlers

interface MultiStepHandlers {
    incrementStep: (delta: number, currentStep: FormKitFrameworkContext | undefined) => () => void;
    setActiveStep: (step: FormKitFrameworkContext) => (e?: Event) => void;
    showStepErrors: (step: FormKitFrameworkContext) => boolean | undefined;
    triggerStepValidations: (step: FormKitFrameworkContext) => void;
}

MultiStepNodeAdditions

添加到多步输入的FormKitNode的附加参数。

interface MultiStepNodeAdditions {
    goTo: (target: number | string) => void;
    next: () => void;
    previous: () => void;
}

MultiStepOptions

要传递给createMultiStepPlugin的选项

interface MultiStepOptions {
    allowIncomplete?: boolean;
    hideProgressLabels?: boolean;
    tabStyle?:'tab' | 'progress';
}

MultiStepSlotData

interface MultiStepSlotData {
    activeStep: string;
    allowIncomplete?: boolean;
    beforeStepChange?: BeforeStepChange;
    handlers: FormKitFrameworkContext['handlers']&MultiStepHandlers;
    hideProgressLabels: boolean;
    node: FormKitMultiStepNode;
    steps: Array<FormKitMultiStepSlotData>;
    tabStyle:'tab' | 'progress';
    validStepIcon: string | undefined;
}

StepHandlers

interface StepHandlers {
    incrementStep: (delta: number) => () => void;
    next: () => void;
    previous: () => void;
}

StepSlotData

特定于步骤输入的插槽数据。

interface StepSlotData {
    beforeStepChange?: BeforeStepChange;
    blockingCount: number;
    errorCount: number;
    handlers: FormKitFrameworkContext['handlers']&StepHandlers;
    hasBeenVisited: true | undefined;
    isActiveStep: boolean;
    isFirstStep: boolean;
    isLastStep: boolean;
    isValid: boolean;
    makeActive: () => void;
    nextAttrs?: Record<string, any>;
    nextLabel?: string;
    ordered: boolean;
    previousAttrs?: Record<string, any>;
    previousLabel?: string;
    showStepErrors: boolean;
    stepIndex: number;
    stepName: string;
    steps: Array<FormKitMultiStepSlotData>;
    totalErrorCount: number;
    validStepIcon?: string;
}

FormKitMultiStepNode

增强了下一步和上一步以及goTo函数的节点类型。

export type FormKitMultiStepNode = FormKitNode & MultiStepNodeAdditions;

FormKitMultiStepSlotData

FormKit多步输入的插槽数据的类型。

export type FormKitMultiStepSlotData = FormKitFrameworkContext<Record<string, any>> & StepSlotData;