【技术实现步骤摘要】
本专利技术涉及web开发，具体为一种在线表单设计器的实现系统及方法。
技术介绍
1、表单作为互联网应用中数据填报的重要工具，其作用举足轻重。然而随着互联网的不断发展，用户的需求多元化，表单也随之复杂化。针对不同的需求对应开发不同的表单，会给开发人员带来沉重的工作，并且会造成需求变化适应困难，维护成本变高的问题。
2、现有技术中，若实现在线表单设计器功能，通过在浏览器页面拖拽形成表单的方式适应多变的需求、减少开发人员的工作量，同时将表单设计器封装成公共组件，增加在线表单设计器的应用场景。
3、所以，如何封装在线表单设计器公共组件成为解决上述问题的一剂良药。本专利技术旨在介绍一种在线表单设计器的实现方法。
技术实现思路
1、本专利技术的目的在于提供一种在线表单设计器的实现系统及方法，通过在线拖拽实现表单设计，大大减少开发人员的编码工作量及维护成本，并且可以提高表单设计的灵活性，以解决上述
技术介绍
中提出的问题。
2、为实现上述目的，本专利技术提供如下技术方案：一种在线表单设计器的实现系统，所述系统包括表单设计组件和表单渲染组件；
3、表单设计组件根据配置文件渲染出对应可拖拽的表单组件，将表单组件拖拽至的表单设计区域，表单及组件属性设置模块；包括表单组件模块、表单设计模块以及属性设置模块；
4、表单渲染组件根据表单设计组件生成的json数据，渲染出对应的表单；包括表单元素输入模块以及表单数据输入模块。
5、优选的，表单
6、优选的，表单设计模块，表单设计模块盛接用户拖拽的表单组件，用户按需将组件拖拽至该区域，将组件的顺序以拖拽的方式进行调整，同时用户如需删除某个组件，将鼠标悬浮至该组件上，点击删除按钮即可。
7、优选的，属性设置模块，分为表单属性设置模块与表单组件属性设置模块，其中表单属性设置模块主要对标签对齐方式、标签宽度和尺寸等属性进行设置；表单组件属性设置模块主要对表单组件的字段标识、标签、宽度、默认值常见属性进行设置。
8、一种实现系统的在线表单设计器的实现方法，所述方法包括以下步骤：
9、读取配置展示表单组件；
10、定义json数据保存设计区表单；
11、表单配置处理；
12、对外提供表单设计组件；
13、使用组件化的思想对表单渲染组件进行封装；
14、根据form输入属性中的list和config对应渲染出表单组件项和表单配置；
15、对表单渲染组件使用者提供获取表单数据的on-change事件。
16、与现有技术相比，本专利技术的有益效果是：
17、本专利技术提出的在线表单设计器的实现系统及方法，开发人员或用户可通过在浏览器页面拖拽表单组件至设计区，并在浏览器页面上设置表单的常见配置项，最终生成业务所需表单。该过程无需额外编码，并且开发人员或用户可根据需求灵活修改表单内容和配置；开发人员在使用表单设计组件时，调用组件对外提供的事件获取表单设计json结果，此种开放表单设计结果的方式，方便开发人员可根据使用场景将json结果做保存数据库或持久化至本地文件的处理；开发人员在使用表单渲染组件时，利用vue的双向绑定特性将组件对外提供的事件中传递的表单数据绑定至变量，可实时获取表单数据，方便用户随时保存表单数据；将表单设计和表单渲染两大功能分别封装为组件，开发人员可根据业务需求选择对应的组件进行二次封装为不同的页面。降低工作人员的工作量和后续维护成本的同时，亦提高组件使用的灵活性，可覆盖多种使用场景。
本文档来自技高网...【技术保护点】
1.一种在线表单设计器的实现系统，其特征在于：所述系统包括表单设计组件和表单渲染组件；
2.根据权利要求1所述的一种在线表单设计器的实现系统，其特征在于：表单组件模块，表单设计组件默认读取component.json中的配置,依次将其中的组件渲染至表单组件模块，供用户根据需要进行选择拖拽至设计区。
3.根据权利要求1所述的一种在线表单设计器的实现系统，其特征在于：表单设计模块，表单设计模块盛接用户拖拽的表单组件，用户按需将组件拖拽至该区域，将组件的顺序以拖拽的方式进行调整，同时用户如需删除某个组件，将鼠标悬浮至该组件上，点击删除按钮即可。
4.根据权利要求1所述的一种在线表单设计器的实现系统，其特征在于：属性设置模块，分为表单属性设置模块与表单组件属性设置模块，其中表单属性设置模块主要对标签对齐方式、标签宽度和尺寸等属性进行设置；表单组件属性设置模块主要对表单组件的字段标识、标签、宽度、默认值常见属性进行设置。
5.一种根据权利要求1-4任意一项所述的在线表单设计器的实现系统的在线表单设计器的实现方法，其特征在于：所述方法包括以下步
...【技术特征摘要】
1.一种在线表单设计器的实现系统，其特征在于：所述系统包括表单设计组件和表单渲染组件；
2.根据权利要求1所述的一种在线表单设计器的实现系统，其特征在于：表单组件模块，表单设计组件默认读取component.json中的配置,依次将其中的组件渲染至表单组件模块，供用户根据需要进行选择拖拽至设计区。
3.根据权利要求1所述的一种在线表单设计器的实现系统，其特征在于：表单设计模块，表单设计模块盛接用户拖拽的表单组件，用户按需将组件拖拽至该区域，将组件的顺序以拖拽的方式进行调整...
【专利技术属性】
技术研发人员：翟文莉，玄德，朱璐，
申请(专利权)人：浪潮云信息技术股份公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。