开源FormCreate低代码表单组件的配置项和事件的详解
在使用开源FormCreate低代码表单时，您可以通过各种 props 来定制表单的行为和外观。这些参数允许您控制表单的生成规则、配置选项、双向数据绑定等，为复杂的表单场景提供了强大的支持。
源码地址: Github | Gitee
FormCreate组件Props
以下是常用的 props 参数及其详细说明：
rule
- 类型：
Array - 说明： 表单的生成规则，定义了表单中各个字段的类型、名称、验证规则等。您可以通过该属性指定表单的结构和行为。详细使用方法请参考 表单生成规则
option
- 类型：
Object - 说明： 配置表单的全局选项，例如表单的提交事件、重置行为、布局方式等。详细配置项请参考 表单全局配置
modelValue(v-model)
- 类型：
Object - 说明： 用于双向绑定表单数据的属性。通过
v-model，您可以实时获取和设置表单的值，使得表单数据与界面同步。
api(v-model:api)
- 类型：
Api - 说明： 通过 v-model:api 获取表单的 fApi 实例。fApi 提供了丰富的 API 接口，可以对表单进行操作，如获取数据、验证表单、重置表单等。详细使用方法请参考 表单API
name
- 类型：
string - 说明： 为表单设置名称。这在需要通过名称来获取表单的
fApi实例时特别有用，您可以使用formCreate.getApi(name)方法来获取对应的fApi
disabled
- 类型：
boolean|undefined - 说明： 全局禁用表单。设置为 true 时，表单中的所有字段将被禁用，用户无法进行任何输入。
subForm
- 类型：
bool - 说明： 指示当前表单是否是子表单。如果设置为
true，则该表单将与父表单同步进行验证和提交操作，默认为true。
extendOption
- 类型：
bool - 说明： 在表单嵌套时，子表单是否自动继承父表单的配置。默认情况下，子表单会继承父表单的全局配置选项。
inFor
- 类型：
bool - 说明： 指示表单是否在
v-for循环中使用。当在循环中渲染多个表单时，设置此属性可以确保表单的唯一性和正确渲染。
index
- 类型：
string|number - 说明： 表单的唯一标识值。当 index 变化时，表单将被自动清空，这对于在重置表单默认值时非常有用。
driver
- 类型：
string|object - 说明：用于扩展表单的渲染逻辑。可以指定自定义的渲染器来替代默认的渲染行为，以满足特殊的业务需求。
通过这些 props，FormCreate 提供了高度的灵活性和可配置性。无论是简单的表单，还是复杂的嵌套表单，您都可以通过这些参数轻松地定制表单的行为和外观。我们建议新用户从基础的 rule 和 option 配置入手，逐步了解并掌握更多高级参数的使用。
FormCreate组件事件
监听表单事件
FormCreate 提供了两种方式来监听表单事件：通过组件直接监听和通过 fApi 监听。
组件监听方式
你可以在模板中直接使用 v-on 或简写的 @ 语法来监听事件。
<form-create @change="onChange"></form-create>
fApi 监听方式
你也可以通过 fApi 对象来监听事件，这种方式更适合在逻辑层面集中管理事件处理。
fApi.on('change',this.onChange);
事件类型
以下是 FormCreate 支持的主要事件类型及其详细说明：
change
- 类型：
type change = (field:string, value:any,rule:Rule, api:Api, setFlag: boolean)=>void;
- 说明： 当表单组件的值在组件内部发生变化时触发。如果 setFlag 为 true，表示该变化是由外部手动修改引发的。
created
- 类型：
type created = (api:Api)=>void;
- 说明： 在表单实例创建时触发，适合进行一些全局的初始设置。
mounted
- 类型：
type mounted = (api:Api)=>void;
- 说明： 表单首次渲染完成后触发，通常用于初始化操作。
submit
- 类型：
type submit = (formData:Object, api:Api)=>void;
- 说明： 当用户点击表单提交按钮时触发，或者通过调用
api.submit()方法手动触发。
remove-field
- 类型：
type removeField = (field:string, rule:Rule, api:Api)=>void;
- 说明：当表单中某个字段被移除时触发，用于执行清理或同步操作。
remove-rule
- 类型：
type removeRule = (rule:Rule, api:Api)=>void;
- 说明：当某个规则从表单中移除时触发，适用于管理表单规则的动态变化。
repeat-field
- 类型：
type repeatField = (rule:Rule, api:Api)=>void;
- 说明：当规则的
field字段重复时触发，用于处理重复字段的情况。
emit-event
- 类型：
type emitEvent = (emitName:string, ...args:any[])=>void;
- 说明： 在组件的
emit事件被触发时触发，允许你监听并处理自定义事件。
control
- 类型：
type control = (rule:Rule, api:Api)=>void;
- 说明： 当组件的
control生效或失效时触发，适用于控制组件的显示逻辑。
reload
- 类型：
type reload = (api:Api)=>void;
- 说明： 在表单重载后触发，用于执行重载后的初始化操作。
通过了解并使用这些事件，开发者可以更好地控制表单的行为和用户交互逻辑，从而打造出更复杂、更具响应性的表单应用。