业务开发中使用动态标签,表单需要动态重组。 我在网上找到了一些可视化表单设计器的例子,在一些后台管理中也常用它们作为代码生成器。
表单生成器
1 简介
ElementUI表单设计和代码生成器可以直接在基于Element的vue项目中运行生成的代码; 它还可以导入 JSON 表单并使用支持的解析器将 JSON 解析为真实的表单。
地址:https://github.com/JakHuang/form-generator
预览:https://mrhj.gitee.io/form-generator/#/
协议:MIT
2. 预览疗效
配置界面
3.使用
通常我们在使用这类东西的时候,都会有一些多元化的需求,除非你的需求很简单,我会把自己处理好的目录结构放下来进行二次开发。
项目参考目录结构
网页
Epage是一个可视化的页面配置工具。 结合后端框架的相关组件库,可以实现复杂的界面交互。 我们会基于业界主流的组件库进行二次封装,使其成为Epage的可配置小部件。 目前我们只针对iview组件库进行封装,其他组件库还在规划中。 开发者还可以自定义开发小部件。常用于流程表单、中后台页面配置
开源地址:https://github.com/didi/epage
文档地址:http://epage.didichuxing.com/usage/#epage
开源协议:MIT
设计师疗效展示
该项目是一个基于schema的可视化页面配置工具。 目前,它基于 vue 和 iview 框架。 这个和其他有点不同的是,它增加了值逻辑处理,这在实际项目中是非常有必要的。
形式设计
它是一个基于Avue的表单设计器,而Avue是基于Element-ui二次封装的。
项目地址:https://github.com/sscfaith/avue-form-design
预览地址:https://form.beta.kim/
协议:MIT
设计师疗效展示
k-形式设计
基于vue和ant-design-vue的表单设计器。 该风格使用 less 作为开发语言。 主要功能是通过简单的操作来配置以后的表单,生成可保存的JSON数据,并将JSON恢复为表单用elementui封装,使表单的开发更简单、更快捷
项目地址:https://gitee.com/kcz66/k-form-design
预览地址:http://cdn.kcz66.com/k-form-design.html
开源协议:MIT
疗效.gif
虽然我目前不建议在实际项目中使用这个,但是放出来的原因是这个项目不错,值得学习。 不推荐的原因是当前项目依赖的ant-design-vue还是1.x版本,ant-design-vue升级2.x几乎是颠覆性的改版。 基于vue3.0用elementui封装,最低必须是vue3.0,所以暂时不建议在项目中直接使用。 其实你觉得用1.x就够了,之前不需要升级,那么你可以试试。
ant-design-vue 文档
总结:
暂时就放上面的这些吧。 我个人使用的是第一个进行二次开发。 网上还有一些不开源的,就不放了。 它们基本上是相同的。 几乎所有的拖放工具都使用拖放库 vuedraggable。 表单库通常是基于框架编写的,常见的有element-ui、iview、ant-design-vue,这些都是常见的ui库。
以前的文章
Vue 后端开发 - 组件
Vue后端开发-打印功能实现
Vue后端开发-制作二维码
Vue后端开发-表单封装
Vue后端开发-数据交互axios
这波 JavaScript 可以收藏一波
整理一波开源后台管理项目