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

news2024/10/11 4:26:05

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)]

校验规则有如下几种

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j0Z3RBci-1690273324713)(https://gitee.com/jumping-little-stars/dynamic-forms/raw/master/assets/right2.png)]

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D7a1eLAW-1690273324713)(https://gitee.com/jumping-little-stars/dynamic-forms/raw/master/assets/right3.png)]

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/789982.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

ROS Neotic(Ubuntu 20.04)如何正确安装OpenCV

ROS Neotic(Ubuntu 20.04)如何正确安装OpenCV

自定义OpenCV版本 一、ROS的安装二、OpenCV编译安装三、cv_bridge编译安装四、温馨提示 一、ROS的安装 鱼香ROS提供了一个全面且方便的脚本&#xff0c;可以直接运行来安装系统对应版本的ROS&#xff0c;同时也可以使用该命令来安装许多有趣的东西 wget http://fishros.com/i…
阅读更多...
Android 实现阅读用户协议的文字控件效果

Android 实现阅读用户协议的文字控件效果

开发中&#xff0c;经常要用到一些阅读隐私协议的场景&#xff0c;原生的textview控件很难做到在一个控件里有两个点击事件&#xff0c;那现在就来安利一个强大的组件——SpannableStringBuilder。 先看看效果&#xff1a; 直接上代码&#xff0c;布局文件&#xff1a; <Li…
阅读更多...
线性DP--BOX

线性DP--BOX

还没学&#xff0c;等学完再仔细写。 #include<bits/stdc.h> using namespace std; typedef long long ll; ll a[1000010]; ll vis[1000010]; ll f[1000010][3]; int main() {ll n,m;cin>>n;for(int i1;i<n;i){cin>>a[i];}for(int i1;i<n;i){cin>&g…
阅读更多...
top工具使用

top工具使用

文章目录 top命令简介top命令输出信息系统信息运行进程信息 top命令参数top命令快捷键自定义字段显示 top命令简介 top命令是Linux下常用的性能分析工具&#xff0c;可用于实时查看系统运行状态以及各个进程的资源占用情况。通常在系统出现CPU负载异常或者内存占用过高时&…
阅读更多...
计算机视觉（三）未有深度学习之前

计算机视觉（三）未有深度学习之前

文章目录 图像分割基于阈值、基于边缘基于区域、基于图论 人脸检测Haar-like特征级联分类器 行人检测HOGSVMDPM 图像分割 把图像划分成若干互不相交的区域。经典的数字图像分割算法一般是基于灰度值的两个基本特征之一&#xff1a;不连续性和相似性。 基于阈值、基于边缘 基于…
阅读更多...
数据可视化（3）

数据可视化（3）

1.饼状图 #饼状图 #pie&#xff08;x,labels,colors,labeldistance,autopct,startangle,radius,center,textprops&#xff09; #x,每一块饼状图的比例 #labels:每一块饼形图外侧显示的文字说明 #labeldistance&#xff1a;标记的绘制位置&#xff0c;相对于半径的比例&#xf…
阅读更多...
【模拟IC】国微微电子模拟IC岗笔试复盘

【模拟IC】国微微电子模拟IC岗笔试复盘

前言 对2023的国微微电子的笔试题进行复盘&#xff0c;答案仅供参考&#xff0c;题型分别有选择题&#xff0c;填空题&#xff0c;简答题以及分析题。一共一百分。麻烦大家点点关注&#xff0c;祝大家拿下大厂sssp,拿下心仪的工作。 一、选择题填空题简答题 套筒式放大器与折…
阅读更多...
微服务测试是什么？

微服务测试是什么？

微服务测试是一种特殊的测试类型&#xff0c;因为它涉及到多个独立的服务。以下是进行微服务测试的一般性步骤&#xff1a; 【B站最通俗易懂】Python接口自动化测试从入门到精通&#xff0c;超详细的进阶教程&#xff0c;看完这套视频就够了 1. 确定系统架构 了解微服务架构对…
阅读更多...
【沐风老师】3dMax模型贴图贴画插件使用方法详解

【沐风老师】3dMax模型贴图贴画插件使用方法详解

3dMax模型贴图贴画插件使用方法 3dMax模型贴图贴画插件（3dmax贴花放置器），是在3dMax对象上放置贴花时使用的一种工具，可以帮助你加快工作速度。现代化的用户界面，能够保留贴花的纵横比、捕捉角度、通过角点或中心轴调整贴花大小的能力、贴花网格的实时投影、创建和编辑“*…
阅读更多...
nginx的快速入手（基本命令）

nginx的快速入手（基本命令）

nginx的快速入手&#xff08;基本命令&#xff09; 1.下载 下载地址&#xff1a;nginx: download 以win的为例。单机下载windows的。 下载完成之后直接解压 2.使用 查看版本 nginx -v 验证配置文件正确吗 就是检查自己修改的配置文件有没有语法上的错误 nginx -t 启动 sta…
阅读更多...
多线程（JavaEE初阶系列4）

多线程（JavaEE初阶系列4）

目录 前言&#xff1a; 1.单例模式 1.1饿汉模式 1.2懒汉模式 1.3结合线程安全下的单例模式 1.4单例模式总结 2.阻塞式队列 2.1什么是阻塞队列 2.2生产者消费者模型 2.2.1 上下游模块之间进行“解耦合” 2.2.2削峰填谷 2.3阻塞队列的实现 结束语&#xff1a; 前言&a…
阅读更多...
Java开发 - 深入理解Redis Cluster的工作原理

Java开发 - 深入理解Redis Cluster的工作原理

前言 前面我们讲过Redis Cluster的搭建方式&#xff0c;也是本着应用优先的原则&#xff0c;所以对其基础概念和原理几乎没有涉及&#xff0c;但当学会了Redis集群的搭建方式之后&#xff0c;对于其原来我们还是要知道一些的&#xff0c;所以这篇博客&#xff0c;我们将一起来…
阅读更多...
数据结构【查找】

数据结构【查找】

第八章 查找 提前了解&#xff1a; 1、关键字&#xff1a; 若关键字能唯一标识一个数据元素&#xff0c;则关键字称为主关键字&#xff1b;若能标识若干个数据元素的关键字称为次关键字&#xff1b; 2、查找&#xff08;检索&#xff09;&#xff1a;顾名思义&#xff0c;给定…
阅读更多...
T113-S3-全志平台wpa_supplicant/hostapd交叉编译移植

T113-S3-全志平台wpa_supplicant/hostapd交叉编译移植

目录 前言 一、源码获取 二、编译前准备 三、hostapd交叉编译 四、wpa_supplicant交叉编译 总结 前言 在嵌入式系统开发中&#xff0c;交叉编译和移植wpa_supplicant和hostapd是实现无线网络功能的重要步骤。本文将分享在T113-S3全志平台上成功交叉编译和移植wpa_supplicant和h…
阅读更多...
Visual Studio Code Python 扩展中的包管理

Visual Studio Code Python 扩展中的包管理

排版&#xff1a;Alan Wang Python 凭借其简单的语法和强大的库&#xff0c;目前已成为最流行的编程语言之一&#xff0c;也是最适合那些刚接触编程的人们的语言。但是&#xff0c;随着项目复杂性和规模的增长&#xff0c;管理依赖项的复杂性也会增加。当新用户不断承接更成熟的…
阅读更多...
【C++STL标准库】算法，仿函数与空间适配器

【C++STL标准库】算法，仿函数与空间适配器

仿函数&#xff1a; 长得像函数&#xff0c;但是不是函数 实际上就是在类或结构体中重载了&#xff08;&#xff09;运算符 结构体仿函数&#xff1a; struct aMax {int operator()(int a, int b) {return a > b ? a : b;} };类仿函数&#xff1a; class Max{ public:i…
阅读更多...
YOLO 划分数据集（训练集、验证集、测试集）

YOLO 划分数据集（训练集、验证集、测试集）

目录 前言训练集、验证集&#xff08;8:2&#xff09;训练集、验证集、测试集&#xff08;7:2:1&#xff09; 前言 本博客是在我的另一篇博客 VOC 格式与 YOLO 格式的相互转换 的基础上进行的&#xff0c;有需要可以参考 以下代码亲测可以直接复制运行&#xff08;以下所有的路…
阅读更多...
论文如何选题

论文如何选题

阅读更多...
13.5 【Linux】使用者的特殊 shell 与 PAM 模块

13.5 【Linux】使用者的特殊 shell 与 PAM 模块

13.5.1 特殊的 shell, /sbin/nologin 我们所谓的“无法登陆”指的仅是&#xff1a;“这个使用者无法使用 bash 或其他 shell 来登陆系统”而已&#xff0c;并不是说这个帐号就无法使用其他的系统资源。举例来说&#xff0c;各个系统帐号&#xff0c;打印工作由 lp这个帐号在管…
阅读更多...
【100天精通python】Day15：python 第三方模块和包，模块如何以主程序形式执行

【100天精通python】Day15：python 第三方模块和包，模块如何以主程序形式执行

目录 1 常用的第三方模块 2. 第三方模块的安装和使用 2.1 安装第三方模块&#xff1a; 2.2 导入第三方模块&#xff1a; 2.3 使用第三方模块&#xff1a; 3 模块以主程序形式执行 4 python 中的包 4.1 python程序的包结构 4.2 创建包 4.3 python中包的导入和使用 5 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023