react实现页面动态表单设计器(自定义推拽表单)

react实现页面动态表单设计器(自定义推拽表单)

  • 实现效果
  • 安装插件
    • 使用
      • 组件介绍
        • 基本设置,可设置控件标签,是否必填,校验规则
        • 校验规则有如下几种
        • 多选,下拉,单选可动态设置每个选择的label以及值

实现效果

react实现页面动态表单设计器(自定义推拽表单)_第1张图片

左侧为拖拽表单,中间为组件,右侧为属性,可设置label,输入限制等

安装插件

cnpm i dynamic-customization-form

使用

 <Dynamicforms
   getlistChange={getlistChange}   //获取表单保存的值
   width={1300} //动态设置宽高
   height={650} />

组件介绍

左侧
多个表单控件,可自由选择拖拽至中间

中间
对推拽后的空间进行值的输入和选择

右侧

基本设置,可设置控件标签,是否必填,校验规则

react实现页面动态表单设计器(自定义推拽表单)_第2张图片

校验规则有如下几种

react实现页面动态表单设计器(自定义推拽表单)_第3张图片

多选,下拉,单选可动态设置每个选择的label以及值

react实现页面动态表单设计器(自定义推拽表单)_第4张图片

最后可点击表单保存,也可以表单重置

你可能感兴趣的:(react.js,前端,前端框架)