react实现页面动态表单设计器（自定义推拽表单）
- 实现效果
- 安装插件
- 使用
- 组件介绍
- 基本设置，可设置控件标签，是否必填，校验规则
- 校验规则有如下几种
- 多选，下拉，单选可动态设置每个选择的label以及值
实现效果
左侧为拖拽表单，中间为组件，右侧为属性，可设置label,输入限制等
安装插件
cnpm i dynamic-customization-form
使用
<Dynamicforms
getlistChange={getlistChange} //获取表单保存的值
width={1300} //动态设置宽高
height={650} />
组件介绍
左侧
多个表单控件，可自由选择拖拽至中间
中间
对推拽后的空间进行值的输入和选择
右侧
基本设置，可设置控件标签，是否必填，校验规则
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jEeWzU2S-1690273324713)(https://gitee.com/jumping-little-stars/dynamic-forms/raw/master/assets/right1.png)]](https://img-blog.csdnimg.cn/a97fb64450ef4a5b8e2d3a3fb3a9e271.png)
校验规则有如下几种
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j0Z3RBci-1690273324713)(https://gitee.com/jumping-little-stars/dynamic-forms/raw/master/assets/right2.png)]](https://img-blog.csdnimg.cn/1333ee8f46db4ae099d7423e8d7b67fa.png)
多选，下拉，单选可动态设置每个选择的label以及值
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D7a1eLAW-1690273324713)(https://gitee.com/jumping-little-stars/dynamic-forms/raw/master/assets/right3.png)]](https://img-blog.csdnimg.cn/ff6ca673718d4584b5e8d2b088927540.png)
最后可点击表单保存，也可以表单重置
