FormKit的常见，可选，第一方附加功能。
您可以通过使用npm install @formkit/addons或yarn add @formkit/addons添加此包。
自动为每个输入添加动画：
createAutoAnimatePlugin(options?: AutoAnimateOptions, animationTargets?: Record<string, string[]>): FormKitPlugin;options 可选 — AutoAnimateOptionsanimationTargets 可选 — 输入类型的映射和应该被动画化的它们的部分的数组。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(): FormKitPlugin;创建一个新的浮动标签插件。
createFloatingLabelsPlugin(FloatingLabelsOptions?: FloatingLabelsOptions): FormKitPlugin;FloatingLabelsOptions 可选 — 传递给插件的FloatingLabelsOptions的选项创建一个新的保存到本地存储插件。
createLocalStoragePlugin(localStorageOptions?: LocalStorageOptions): FormKitPlugin;localStorageOptions 可选创建一个新的多步插件。
createMultiStepPlugin(options?: MultiStepOptions): FormKitPlugin;options 可选 — 传递给插件的 MultiStepOptions 的选项传递给 createFloatingLabelsPlugin 的选项
interface FloatingLabelsOptions {
useAsDefault?: boolean;
}传递给 createLocalStoragePlugin 的选项
interface LocalStorageOptions {
beforeLoad?: (payload: any) => any;
beforeSave?: (payload: any) => any;
control?: string;
debounce?: number;
key?: string | number;
maxAge?: number;
prefix?: string;
}传递给 createMultiStepPlugin 的选项
interface MultiStepOptions {
allowIncomplete?: boolean;
hideProgressLabels?: boolean;
tabStyle?:'tab' | 'progress';
}