开源项目低代码表单 FormCreate 支持在表单中生成并使用任何 Vue 组件。无论是简单的 UI 组件，还是复杂的自定义逻辑，都可以通过以下方式轻松集成到表单中。

源码地址: Github | Gitee

开源项目低代码表单FormCreate中教你如何扩展业务组件_第1张图片

注意事项

  • 挂载与注册： 在自定义组件渲染之前，必须通过全局或局部的方式挂载或注册自定义组件，详见挂载或注册
  • 获取组件规则： 只要在生成规则中定义 name 属性，就可以通过 fApi.component(name) 方法获取组件规则，方便在表单中动态操作该组件。

组件挂载方式

通过 FormCreate 生成的自定义组件需要先进行挂载。挂载方式有两种：全局挂载和局部挂载。

全局挂载

全局挂载适用于整个 Vue 应用。通过这种方式，组件在应用的任何地方都可以使用。

登录后复制 
app.component('TestComponent', TestComponent);
  • 1.

局部挂载

局部挂载适用于特定的表单实例。这种方法使得组件只在特定表单中可用，使用 formCreate.component() 方法进行挂载。

登录后复制 
formCreate.component('TestComponent', TestComponent);
  • 1.

开源项目低代码表单FormCreate中教你如何扩展业务组件_第2张图片

扩展表单组件教程

在 FormCreate 中，您可以轻松地将自定义的 Vue 组件转换为表单组件，甚至可以与内置表单组件一样使用。以下指南将帮助您理解如何生成自定义表单组件，并展示实际业务场景中的用法。

预定义组件属性和事件

要让您的自定义组件在 FormCreate 中充当表单组件，您需要确保组件实现了 v-model 的基本功能。这意味着组件需要接收和管理 modelValue 以及 disabled 状态，并在值变化时触发 update:modelValue 事件。

Props 接收 在自定义组件内部，确保通过 props 接收以下属性：

登录后复制 
// vue 组件示例
{
  props: {
    modelValue: String, // 绑定的表单值
    disabled: Boolean   // 组件的禁用状态      
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

触发事件 当组件内部的值发生变化时，通过 update:modelValue 事件通知外部值的更新：

登录后复制 
this.$emit('update:modelValue', newValue);
  • 1.

挂载表单组件

在生成表单之前，您需要确保自定义组件已通过全局或局部方式挂载。

全局挂载

全局挂载适用于整个 Vue 应用。通过这种方式，组件在应用的任何地方都可以使用。

登录后复制 
app.component('TestComponent', TestComponent);
  • 1.

局部挂载

局部挂载适用于特定的表单实例。这种方法使得组件只在特定表单中可用，使用 formCreate.component() 方法进行挂载。

登录后复制 
formCreate.component('TestComponent', TestComponent);
  • 1.

生成表单组件

要在表单中生成自定义表单组件，您需要在生成规则中定义 field 属性，这是表单组件的必需属性。

登录后复制 
{
    type:'TestComponent',
    value:'test',
    field:'testField',
    title:'自定义组件'
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.

参数自动注入

FormCreate 在生成自定义组件时，会自动向组件注入一些有用的参数。这些参数可以帮助你更好地管理组件与表单的交互。

  • formCreateInject
  • formCreateInject.api 表单 API 对象，用于操作表单。
  • formCreateInject.options 表单组件的全局配置。
  • formCreateInject.rule 生成规则对象，定义了组件的所有配置。
  • formCreateInject.field 字段名称，与表单数据绑定。

示例

简单输入框组件

这是一个基本的自定义输入框组件。

登录后复制
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
自定义选择器组件

这是一个自定义选择器组件，允许用户从给定的选项中选择一个值。

登录后复制
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
带前缀和后缀的输入框组件

这个组件展示了如何在输入框中添加前缀和后缀。

登录后复制
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
自定义复合输入组件

这是一个复合组件，结合了输入框和选择器，适用于如选择国家和输入电话号码的场景。

登录后复制
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
依赖于外部数据源的选择器

这个组件会从远程 API 获取数据并填充到下拉选择框中，用户可以选择一个选项，选择的结果将会影响表单的其他部分。

登录后复制
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.


扩展自定义组件教程

通过标签生成自定义组件

以下是通过标签生成 el-button 组件的示例：

登录后复制 
{
   type: 'el-button',
   name: 'btn',
   props: {
     type: 'primary',
     loading: true
   },
   children: ['加载中']
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.

使用 component 配置项直接生成组件

如果不想提前挂载组件，可以通过 component 配置项在生成规则中直接指定组件。这样无需显式挂载，组件即可在表单中使用。

登录后复制 
const rule = {
   type: 'test',
   component: TestComponent
};
  • 1.
  • 2.
  • 3.
  • 4.

动态修改规则

可以使用 fApi.getRule() 方法获取生成规则，并动态修改组件属性：

登录后复制 
fApi.getRule('btn').props.loading = false
  • 1.

这种方式非常灵活，适合在运行时根据业务逻辑调整组件行为。

通过掌握以上自定义组件的生成和操作方法，您可以在 FormCreate 中实现几乎任何复杂的表单需求。无论是简单的按钮，还是复杂的动态表单项。