Skip to content

容器组件

用于包裹或动态控制其他组件的显示与布局。相比基础组件更关注“怎么组织内容”,它们通常决定的是结构、分组方式和交互承载区域。

插槽区域

提供可自定义内容的区域,允许父组件动态插入子组件或内容。

核心功能

容器组件的自定义内容扩展区域,无固定表单逻辑,专门用于插入非标准表单项的自定义内容(纯展示 / 交互类),支持 HTML、文本、按钮组等任意内容,不绑定表单数据,仅做界面补充。

功能特性

  • 定义插槽:用户可以在组件中定义一个或多个插槽,作为占位符,用于填充不同内容。
  • 内容填充:通过插槽,用户可以在特定的组件区域中插入动态内容,从而实现更灵活的布局和内容展示。
  • 任意类型:支持任意类型的内容插入,包括文本、图片、其他组件等,使得表单设计更加灵活和多样。

适用场景

  • 表单分组头部添加模块说明文字(如 “收货地址信息仅用于本次配送”);
  • 表单模块底部插入操作按钮(如 “清空当前模块内容”);
  • 插入业务相关的图片、二维码或链接(如报销表单插入发票示例图)。

插槽区域

动态区域

根据条件或数据动态渲染不同内容,适用于需要灵活切换的布局场景。

核心功能

支持动态增删行的表单区域,可配置 “新增 / 删除” 按钮,区域内的表单项可批量复制、移除,数据以数组形式存储,适配 “一组数据需重复录入” 的场景。

功能特性

  • 加载 JSON 规则:用户可以将预定义的 JSON 规则导入到动态区域组件中,自动生成对应的表单布局和组件。
  • 动态填充:根据 JSON 规则,动态区域组件能够自动填充相应的组件,减少手动配置的工作量,提高效率。
  • 灵活性:通过 JSON 规则,可以灵活定义各类组件及其属性,适应不同业务需求。
  • 实时更新:支持根据实时数据动态更新组件内容,使得表单能够及时反映最新的数据变化。
  • 模块化:用户可以预定义一组 JSON 规则,用于重复使用和快速配置,实现表单设计的模块化管理。

适用场景

  • 订单表单中添加多商品明细(可新增 / 删除商品行,每行含商品名称、数量、单价);
  • 入职表单中录入多个紧急联系人(可新增联系人,每行含姓名、电话、关系);
  • 报销表单中添加多笔费用明细(可删除错误的费用行)。

动态区域

Vue组件

用于嵌入自研组件,扩展表单业务能力

核心功能

容器内嵌入自定义 Vue 组件的专属入口,可绑定 FormCreate 的表单数据、触发表单事件,打通可视化表单与自研业务组件的联动,支持传参、事件回调。

适用场景

  • 嵌入自研的验证码输入组件(绑定表单验证逻辑);
  • 插入业务专属的签名组件(收集手写签名并同步至表单数据);
  • 集成自定义的门店选择组件(适配企业专属的门店列表)。

Vue组件

如果你需要把企业内部的专属能力正式接进设计器,这类场景通常会继续查看扩展组件原型方法

表单项

作为表单字段的容器,支持统一管理字段样式、验证规则或布局。

核心功能

容器内最基础的表单元素承载区域,用于放置输入框、选择器、开关等标准表单项,支持数据绑定、校验规则、显隐控制等核心表单逻辑,是容器内数据录入的核心载体。

适用场景

  • 个人信息容器内放置姓名输入框、手机号输入框、性别单选框;
  • 收货地址容器内放置省市区选择器、详细地址输入框、邮编输入框;
  • 支付信息容器内放置支付方式单选框、银行卡号输入框。

表单项

从结构上看,容器组件往往对应规则中的嵌套层级与拖拽约束;如果你需要进一步理解哪些组件可拖入、子节点如何组织,可以参考TS类型定义