内置插件
这个 @formkit/inertia 插件旨在将 Inertia.js 与 FormKit 格式无缝地整合,利用一个强大的事件系统来利用 Inertia.js 事件召回和 FormKit 插件来进行平滑而强大的网络开发体验.
目录
安装
要使用 Inertia 插件, 我们需要安装和运行 Inertia Vue. JS 的 Laravel 工程, 您可以通过查看指南的第一部分来检查 使用带有 Laravel Inertia 的窗体Kit。 。 。 .
现在,您可以使用您首选的软件包管理器安装 :
npm install @formkit/inertia
使用量
要使用 Inertia 插件,我们需要导入 useForm 函数从 @formkit/inertia,叫 useForm 函数以接收 form,它与Inertia的方法调用,反应状态,用于扩展的加通,以及FormKit插件相接.
这个 useForm 函数为您通过插件传递到窗体的初始字段选择一个参数,它也会像返回方法 submit, (中文(简体) ), get, (中文(简体) ), post, (中文(简体) ), put, (中文(简体) ), patch 财务报告和审定财务报表 delete。所有这些方法将返回一个合适的功能,作为FormKit的功能 @submit 处理者.
使用它的最简单方式是创建一个新的 const 并添加 form.plugin 到窗体Kit表单 :plugins数字 :
<script setup lang="ts">
import { useForm } from '@formkit/inertia'
const form = useForm()
const submitHandler = form.post('/login')
</script>
<template>
<FormKit type="form" @submit="submitHandler" :plugins="[form.plugin]">
<FormKit type="text" name="username" label="Username" />
<FormKit type="password" name="password" label="Password" />
</FormKit>
</template>
您也可以在模板中直接定义处理器 :
<FormKit
type="form"
@submit="(fields, node) => form.post('/login')(fields, node)"
:plugins="[form.plugin]"
>
<!-- The rest of your form -->
</FormKit>
函数支持所有 访问选项 从Inertia,例如 preserveState, (中文(简体) ), preserveScroll,和事件召回.
这个
options事件召回会覆盖该特定事件的任何默认事件, 这意味着如果您添加onStart你会失去事件 从start例如装入、拆卸和加工.
<FormKit
type="form"
@submit="(fields, node) => form.post('/login', {
preserveScroll: true,
onSuccess: () => form.node.reset(),
})(fields, node)"
:plugins="[form.plugin]"
>
<!-- The rest of your form -->
</FormKit>
要取消提交的表格,请使用 cancel() 方法.
<FormKit
type="form"
@submit="(fields, node) => form.post('/login')(fields, node)"
:plugins="[form.plugin]"
>
<!-- The rest of your form -->
</FormKit>
<FormKit type="button" @click="form.cancel()" label="Cancel" />
(单位:千美元)返回顶端(中文(简体) )
这个 useForm() 可堆叠还返回反应状态。 伊诺蒂亚是: processing, (中文(简体) ), progress, (中文(简体) ), recentlySuccessful 财务报告和审定财务报表 wasSuccessful,基于FormKit 的系统是 valid, (中文(简体) ), errors, (中文(简体) ), dirty 财务报告和审定财务报表 node。例如,你可以使用 processing 状态,以便在Inertia处理表单时禁用表单提交按钮(假设您正在使用自己的提交按钮) :
<template>
<FormKit type="form" @submit="submit" :plugins="[form.plugin]">
<FormKit type="text" name="username" label="Username" />
<FormKit type="password" name="password" label="Password" />
<template #submit>
<FormKit type="submit" label="Log in" :disabled="form.processing" />
</template>
</FormKit>
</template>
(单位:千美元)返回顶端(中文(简体) )
加词
扩展功能的主要功能是传递附加到 addon(),这样你就可以瞄准多个事件 当那些被Inertia事件召回系统调用时,将会被触发, addon() 接受函数或数组函数 on(),它接受任何来自Inertia事件召回的事件(没有 on 前缀),具体指: before, (中文(简体) ), start, (中文(简体) ), progress, (中文(简体) ), success, (中文(简体) ), error, (中文(简体) ), cancel, (中文(简体) ), cancelToken 财务报告和审定财务报表 finish。转发给您的调用参数是Inertia事件的调用参数,然后FormKit的节点:
<script setup lang="ts">
import { useForm } from '@formkit/inertia'
const form = useForm()
form.addon((on) => {
on('before', (visit, node) => {
return confirm('Are you sure you want to delete this user?')
})
on('success', (page, node) => {
toast('User deleted.')
})
})
</script>
如果您需要单个事件召回 useForm() ưμ㼯a on() 直接 :
<script setup lang="ts">
import { useForm } from '@formkit/inertia'
const form = useForm()
form.on('before', (visit, node) => {
return confirm('Are you sure you want to delete this user?')
})
</script>
(单位:千美元)返回顶端(中文(简体) )
路线图
- 做一个
success财务报告和审定财务报表error能够返回的事件 aPromise<void>以延后呼叫finish事件 - 添加对支持 拉维尔识别
(单位:千美元)返回顶端(中文(简体) )
类型
useForm
export const useForm: <F extends RequestPayload>(initialFields?: F | undefined) => {
on: <T extends "before" | "start" | "progress" | "finish" | "cancel" | "success" | "error" | "cancelToken">(name: T, cb: EventCallback[T]) => void;
addon: (addons: AddonExtension | AddonExtension[]) => void;
plugin: (node: FormKitNode) => false | undefined;
node: Ref<FormKitNode | null>;
dirty: Ref<boolean | null>;
errors: Ref<boolean | null>;
valid: Ref<boolean | null>;
processing: Ref<boolean>;
progress: Ref<number>;
recentlySuccessful: Ref<boolean>;
wasSuccessful: Ref<boolean>;
submit: (method: Method, url: URL | string, options?: Exclude<VisitOptions, 'method' | 'data'>) => (data: F, node: FormKitNode) => void;
get: (url: URL | string, options?: Exclude<VisitOptions, 'method' | 'data'>) => (data: F, node: FormKitNode) => void;
post: (url: URL | string, options?: Exclude<VisitOptions, 'method' | 'data'>) => (data: F, node: FormKitNode) => void;
put: (url: URL | string, options?: Exclude<VisitOptions, 'method' | 'data'>) => (data: F, node: FormKitNode) => void;
patch: (url: URL | string, options?: Exclude<VisitOptions, 'method' | 'data'>) => (data: F, node: FormKitNode) => void;
delete: (url: URL | string, options?: Exclude<VisitOptions, 'method' | 'data'>) => (data: F, node: FormKitNode) => void;
cancel: () => void;
}
AddonExtension
export type AddonExtension = (on: ReturnType<typeof createEventManager>['on']) => void;
(单位:千美元)返回顶端(中文(简体) )