一种拖拽式表单构建方法及装置制造方法及图纸

本发明专利技术涉及web前端技术领域，具体提供了一种拖拽式表单构建方法及装置，具有如下步骤：S1、为每一个标签字段模板组件库设计详细的字段属性组件；S2、在表单设计窗体中，增加表单属性组件；S3、将所需的标签字段从工具栏拖放到表单设计窗体上，自动生成对应的表单元素，创建一个直观的属性编辑栏；S4、从工具栏拖拽标签字段到表单设计窗体并自动生成相应表单元素的过程；S5、利用Vue的模态框组件，将表单设计窗体中的表单配置通过数据绑定的方式传递给预览模态框；S6、将用户在表单设计窗体中所做的所有配置和设计的表单元素进行序列化处理；S7、获取已生成的表单数据，接收方根据返回的数据。与现有技术相比，本发明专利技术能够显著增强代码的可重用性，有效削减了代码冗余，进而加速了开发进程。

【技术实现步骤摘要】

本专利技术涉及web前端，具体提供一种拖拽式表单构建方法及装置。

技术介绍

1、vue是目前前端开发领域中最主流框架之一，其在企业级开发中占据重要地位，尤其在构建后台管理系统的单页面应用时，vue的普及和应用程度尤为显著。其强大的组件化、数据驱动和响应式特性，使得开发者能够高效、灵活地构建出功能丰富、交互体验出色的企业级应用。

2、现有动态生成表单的方法，是基于原生javascript通过鼠标事件和创建元素，或者是用过使用html5实现，或者使用vue使用等实现的。这些实现方法，各自存在着一些冗余代码多、可复用性差，兼容性差，耦合性高，开发效率较低等问题。如何解决上述问题是本领域技术人员亟待解决的问题。

技术实现思路

1、本专利技术是针对上述现有技术的不足，提供一种实用性强的拖拽式表单构建方法。

2、本专利技术进一步的技术任务是提供一种设计合理，安全适用的拖拽式表单构建装置。

3、本专利技术解决其技术问题所采用的技术方案是：

4、一种拖拽式表单构建方法，具有如下本文档来自技高网...

【技术保护点】

1.一种拖拽式表单构建方法，其特征在于，具有如下步骤：

2.根据权利要求1所述的一种拖拽式表单构建方法，其特征在于，在步骤S1中，针对每个标签字段，设计字段属性，包括用于显示的标题、可调整的元素宽度、自定义的样式类名以实现视觉差异化。

3.根据权利要求2所述的一种拖拽式表单构建方法，其特征在于，在步骤S2中，表单设计窗体支持拖拽操作，拖拽后的元素默认以竖向排列方式展示，且横向自动扩展以充分利用窗体空间；

4.根据权利要求3所述的一种拖拽式表单构建方法，其特征在于，在步骤S3中，通过有序化列表和定位技术，将多种标签字段有序且整齐地排列在工具栏中；

...

【技术特征摘要】

1.一种拖拽式表单构建方法，其特征在于，具有如下步骤：

2.根据权利要求1所述的一种拖拽式表单构建方法，其特征在于，在步骤s1中，针对每个标签字段，设计字段属性，包括用于显示的标题、可调整的元素宽度、自定义的样式类名以实现视觉差异化。

3.根据权利要求2所述的一种拖拽式表单构建方法，其特征在于，在步骤s2中，表单设计窗体支持拖拽操作，拖拽后的元素默认以竖向排列方式展示，且横向自动扩展以充分利用窗体空间；

4.根据权利要求3所述的一种拖拽式表单构建方法，其特征在于，在步骤s3中，通过有序化列表和定位技术，将多种标签字段有序且整齐地排列在工具栏中；

5.根据权...

【专利技术属性】
技术研发人员：申克，尹萍，
申请(专利权)人：浪潮云信息技术股份公司，
类型：发明
国别省市：