syncfusion-vue-form-builder

用途

Syncfusion Vue Form Builder 是一个可视化表单设计器，用于在 Vue 3 应用中创建、排错和扩展可编辑表单。它生成由 schema 驱动的表单定义：用户可以把字段拖到画布上，在属性面板中配置字段，预览结果，并导出 schema 供 Form Renderer 使用。

该技能面向“设计并编辑表单”的任务。如果主要任务是渲染已完成的 schema 给最终用户、处理提交值或配置渲染器表单动作，应改用 Vue Form Renderer 技能。

主要能力

在 Vue 3 Vite 应用中安装并注册 Syncfusion Form Builder 包与主题。
渲染包含工具箱、画布、属性面板、代码视图和预览的可视化表单设计器。
通过 schema 属性加载初始表单。
在 properties 中定义字段、在 layout 中排列布局，并设置表单级配置。
配置 Form Builder 属性，如导出、预览、持久化、RTL、模式、模板和工具箱项。
从 Basic、Advanced 和 Layout 工具箱分类中选择字段。
自定义字段属性、添加或隐藏属性面板条目，并刷新设计器。
定义自定义工具箱模板，并通过 setFieldValue 同步模板值。
处理字段 drag-start、drag-over、drop 和 property-changed 事件。
查看、复制、导入或导出生成的 JSON schema。
准备包含校验、条件、表达式、依赖下拉、动态范围、远程数据或 Data Grid 字段的 schema。

使用方式

安装包：

npm install @syncfusion/ej2-vue-form-builder @syncfusion/ej2-material3-theme

注册插件并绑定初始 schema：

provide('FormBuilderPlugin', [FormBuilderPlugin]);

const formSchema = { version: '0.1.0', properties: { emailAddress: { id: 'textbox_1785491685456_167', name: 'emailAddress', type: 'string', label: 'Email Address', textboxType: 'email', required: true, placeholder: 'Enter your email', widget: 'textbox' } }, layout: [{ type: 'field', propertyId: 'emailAddress' }], settings: { name: 'Untitled Form' } }; </script>

使用 npm run dev 启动 Vite 应用，然后通过工具箱和属性面板编辑表单。项目创建、主题设置和完整初始配置可参考 getting-started 文档。

自定义工具箱示例：

import { ComponentCategory, FormWidgetType } from '@syncfusion/ej2-form-builder';

const toolboxCategories = [ { category: ComponentCategory.Basic, items: [FormWidgetType.Textbox, FormWidgetType.Textarea] }, { category: ComponentCategory.Advanced, items: [FormWidgetType.Date, FormWidgetType.DateRange] } ];

动态添加属性示例：

formObj.value?.ej2Instances.setProperty(FormWidgetType.Textarea, { key: 'enableRtl', label: 'Enable RTL', type: 'boolean', default: false });

注册自定义模板示例：

<e-toolboxitemsetting :type="formType" :template="'textboxTemplate'" /> <template v-slot:textboxTemplate="{ data }"> <input :value="data.value || ''" @input="setFieldValue(data, $event)" /> </template>

使用预览与 JSON 输出：切换到 Preview 标签验证布局和交互，再打开 JSON 标签查看导出的 schema，并复制用于 Form Renderer。

适用场景

需要创建 Vue 3 可视化表单设计器。
需要通过 schema 加载初始表单并继续编辑。
需要配置字段属性、布局、校验、条件、表达式、依赖下拉、动态范围、远程数据或 Data Grid 字段。
需要自定义工具箱分类、工具箱模板或第三方控件模板。
需要导入、导出或复用 JSON schema。
需要处理设计器交互事件（拖拽、属性变更）。

限制与注意事项

该技能用于设计并编辑表单；渲染已完成 schema、处理提交值或配置渲染器表单动作应使用 Vue Form Renderer 技能。
每个字段应具有唯一 name、稳定 id、受支持的 widget 和匹配的 type。
每个 layout 字段节点必须引用有效的 propertyId。
布局容器保留在 layout 中，其子字段保留在 properties 中。
校验、条件、表达式、范围和数据源需使用文档规定的引用结构。
自定义模板需通过 setFieldValue 更新 Form Builder 状态。
自定义组件引用需使用 ej2Instances 调用 Form Builder 方法。
预览和导出应根据工作流启用或禁用。
资料未提供具体收费、价格、平台支持范围或效果承诺，暂未提供相关信息。

技能介绍

用途

主要能力

使用方式

适用场景

限制与注意事项