diy 自定义表单组件开发指南

功能介绍

作为DIY页面装修的核心交互组件，支持用户通过「可视化拖拽 + 字段配置 + 规则自定义」的方式，零代码快速搭建个性化表单（如报名表单、问卷调研、信息收集、预约申请等），覆盖多场景数据采集需求，同时提供表单提交、数据管理、权限控制等全流程能力，确保数据采集高效、安全、可追溯。

左侧展示组件库，中间实时预览，右侧可以编辑组件的属性设置等

自定义表单装修效果图

框架开发的自定义表单功能目录位置说明

框架开发的的自定义功能代码位置：niucloud/app/dict/diy_form

如需了解核心原理，开发者可以自行阅读

ComponentDict.php 框架开发的自定义表单组件，以及加载插件的自定义表单组件

ConfigDict.php 万能表单提交页配置项常量

TemplateDict.php 自定义表单模板，以及加载插件的表单模板

TypeDict.php 表单类型，以及加载插件的表单类型

框架开发的自定义表单装修

自定义表单装修的核心原理

如需了解自定义表单装修的核心原理，开发者可以自行阅读

文件位置：admin\src\app\views\diy_form\edit.vue

页面装修store状态管理代码

与自定义页面装修共用，万能表单也可以使用自定义组件

文件位置：admin\src\stores\modules\diy.ts 装修数据最终存储到数据表中的结构主要包含两大部分：

global：global对象为整体页面的数据结构，后续还会持续完善，实现更加灵活的自定义装修 value：value为组件集合，在装修时添加自定义组件会变化

uni-app手机端渲染自定义组件diy-group组件

在移动端（uni-app）中，自定义页面通过diy-group组件进行渲染。该组件负责解析和展示装修数据中的所有组件。

文件位置：uni-app/src/addon/components/diy/group/

自定义表单组件渲染管理代码

文件位置：uni-app/src/hooks/useDiyForm.ts

配置本地开发环境，实时预览，渲染组件

参考：diy 自定义组件配置本地开发环境

若配置成功后，添加一个组件，如果可以正常渲染，那就表示配置成功了