基于之前element form二次封装的组件 element ui 拖拽表单生成器

最新推荐文章于 2024-09-13 22:20:42 发布
最新推荐文章于 2024-09-13 22:20:42 发布
阅读量883 收藏 2
点赞数 2
分类专栏： element拖拽生成表单 element vuejs 文章标签： vue elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mengdongdew/article/details/113741095
版权
本文介绍了将ElementUI的表单进行二次封装，并使用ZX-Form实现拖拽生成表单的功能。已实现的功能包括查看JSON数据、设置JSON数据、导出Vue文件、复制代码及在线预览。待优化点包括将单选框和复选框的数据结构改为动态数组，以及添加更多属性。项目已开源，提供在线预览和源码下载。
摘要由CSDN通过智能技术生成

之前将element ui 的form表单进行了二次封装

详细内容请看链接: element-ui form表单，table二次封装

现基于zx-form实现拖拽生成表单

现在先来看一下页面效果
在这里插入图片描述
其中大部分效果已经实现，有时间会继续优化

包含的一些逻辑

1.查看json数据 拖拽后的表单可查看json数据,Json数据支持导出与复制
在这里插入图片描述
2.设置Json数据 可直接设置json数据来展示表单
3.导出vue文件 设计好表单后可直接导出vue文件，放入对象项目中，可以直接使用
4.复制代码 表单设计好后，可以直接复制代码，放入自己的vue文件中使用
5.在线预览 可以直接在线预览

暂时未完成功能

1.现在radio checkBox 都还是使用的字符串来代替数组，有时间改成动态添加数组数据
2.现在只添加了一些重要属性，还有很多属性没有添加，后续会慢慢更改

现已经将项目放到github

项目地址
在线预览地址

轮回千载
关注
专栏目录
基于vue的 表单设计器（拖拽生成表单）
m0_54854317的博客
03-02 2万+
日常开发时想要快速构建节省时间或者功能需求需要拖拽生成表单，推荐使用以下表单设计器。 1.基于vue+elementui 的表单设计及代码生成器 Form Generator Element UI表单设计及代码生成器，可将生成的代码直接运行在基于Element的vue项目中；也可导出JSON表单，使用配套的解析器将JSON解析成真实的表单。 码云仓库：form-generator: Element UI表单设计及代码生成器 演示地址：form-generator 安装依赖： npm install JS
Form-Generator拖拽表单的使用+二次修改
wwming的日记本
06-20 8612
FormGenerator拖拽表单 本文讲述了form-generator项目基于Vue框架以及ElementUI组件实现拖拽表单完成项目及二次开发 gitee地址 ： https://gitee.com/mrhj/form-generator?_from=gitee_search 简介 Element UI表单设计及代码生成器，可将生成的代码直接运行在基于Element的vue项目中；也可导出JSON表单，使用配套的解析器将JSON解析成真实的表单。 使用 在左侧点击组件或拖拽组件到画板 ， 生成
el-form-design:一个基于element ui的可拖拽生成表单的表单设计器
05-10
el-form-design 一个基于element ui的可拖拽生成表单的表单设计器 有任何意见建议或者问题请在我 下留言 或者提 issues 我将尽最大努力解决 使用方法 # 1.安装 npm install el-form-design # or yarn install el-form-design # 2. 导入 import elformdesign from 'el-form-design' # 因为是基于 element ui 的 所以可能需要用户提前安装 element ui 并全部导入 Vue.use(ElementUI); Vue.use(elformdesign); # 3 使用 # 直接在页面中 使用 标签 即可展示出 表单编辑页面 示列代码 (表单设计页面) <di
ElementUI表单生成器
人生小满胜万全 任何时候 别为难自己
09-15 651
form-generator
Element UI表单设计及代码生成器项目推荐
最新发布
gitblog_09163的博客
09-13 454
Element UI表单设计及代码生成器项目推荐 form-generator :sparkles:Element UI表单设计及代码生成器 项目地址: https://gitcode.com/gh_mirrors/fo/form...
element ui表单生成器
派大星的博客
11-30 1104
element ui表单生成器 https://mrhj.gitee.io/form-generator/#/
Elemnet万能表单生成器
weixin_45332140的博客
11-28 486
【代码】Elemnet万能表单生成器。
vue element表单快速生成器
Twinkle_sone的博客
08-26 738
前端开发的福音，拖拽组件快速生成element表单，该项目作者已开源，有兴趣的可以去看看，这里我只是推荐一下，提升工作效率。 地址：https://mrhj.gitee.io/form-generator/#/
Element UI表单设计及代码生成器.rar
05-28
设计器基于Element UI ，可通过点击或拖拽的方式设计基本表单， 设计器生成的代码可直接运行在基于 Element 的 vue 项目中。 github仓库 https://github.com/JakHuang/form-generator 码云仓库 ...
Element UI表单设计代码生成器快速上手指南
在表单生成器的上下文中，配套的解析器会读取JSON表单数据，将其转换为实际的表单元素，并嵌入到Web页面中。这样，开发者可以在不同的环境下轻松地复用和部署表单。 知识点六：代码生成器在开发中的作用 描述：代码...
vueUtils:基于element 封装的可拖拽表单
05-11
demo 在线预览 git subtree push --prefix=dist origin gh-pages . gzip压缩 //引入该插件 const CompressionWebpackPlugin = require("compression-webpack-plugin") //匹配此 {RegExp} 的资源 const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i const plugins = [] // start 生成 gzip 压缩文件 plugins.push( new CompressionWebpackPlugin({ filename: "[path].gz[query]", //目标资源名称 algorithm: "gzip", test: productio
elementui的表单可视化编辑器自动生成表单验证代码
08-12
element-ui 的表单可视化编辑器，自动生成表单验证代码。不是一个可视化解决方案，更像是生成模板的工具。为解决笔者记不住 element-ui 表单验证写法而生。
vue+element创建动态的form表单及动态生成表格的行和列
12-29
动态创建form表单,网上有插件 (form-create) 不过我不知道它怎么用,没有使用成功,如果你使用成功了,欢迎下方留言. 　　最后我使用了笨方法,针对各个表单写好通用的组件，然后根据type用v-if来渲染对应的表单,数据，事件什么的都可以动态的传进去,比较好用 <el size=mini class=lj-form> <div v-for=(item,i) key=i> <!-- 0单行文本 --> <el-form-item
vue-form-builder:使用Vue.js和Element UI构建并生成表单源代码的拖放表单构建器平台（基于vue和element-ui实现的表单设计平台，生成Element UI的表单源代码）
03-23
形式生成器 简体中文| 简介 一个通过拖拽生成表单页面的平台，基于Vue.js和Element UI开发，并生成表单源代码（WYSIWYG），可以让表单开发简单而高效。 本项目在基础上二次开发，目的是生成表单的Element UI原始代码，然后将生成的源码放在项目中使用，代替手写表单的工作。 在线访问： 特性 可视化配置页面 提供布局布局，并采用flex实现对齐 一键生成代码，立即可运行 提供自定义组件满足用户自定义需求 提供功能强大的高级组件 国际化支持 生成元素UI表单源代码（方便开发者拖拽生成表单，复制源码到项目中快速开发） 提供早期数据接口，方便用户需要异步获取数据加载 支持表单验证 快速获取表单数据 支持 如果你发现了新的bug，或者有新的功能要求，请新建一个问题 浏览器支持 现代浏览器和Internet Explorer 10+。 IE浏览器/边缘 火狐浏览器 Chro
vuedraggable+element ui实现页面控件拖拽排序效果
10-17
主要为大家详细介绍了vuedraggable+element ui实现页面控件拖拽排序效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
diypage:基于vue + element-ui自定义拖拽页面
03-11
虚拟网页 做专题页面或者可视化diy页面时，牵涉到一些解决思路; 演示 视频演示（上传一个视频，可以看下动态效果） 1.页面布局 a。可以分类三栏，左侧组件栏，右侧数据编辑栏，中级，页面效果展示栏 2.动画效果 如果直接用数据驱动，动画比较僵硬，建议使用一些弹性动画效果 如果拖拽函数使用html5，拖动函数，不好用，而且拖起来有个很难看的一块，不方便自定义；建议自己改用onmouesemove / start / end来原生书写 移动时建议transform加上一个动画延迟，这样会有一些缓冲的效果，不生硬，而且动画渲染更流畅；如在拖曳元素上加上过渡时间：50ms； 3.数据存储方式 我这里是用json存储到本地存储里面，保存时再序列化到放置，每一个可以拖拽的（上下拖拽）。上下调整是改变transform：'translateY（'+ wrap.originTop +'px）';原理就是
探索高效开发：Element UI 表单设计及代码生成器
gitblog_00761的博客
08-08 679
探索高效开发：Element UI 表单设计及代码生成器 form-generator:sparkles:Element UI表单设计及代码生成器项目地址:https://gitcode.com/gh_mirrors/fo/form-generator 在现代Web开发中，表单是不可或缺的一部分，但同时也是开发过程中最耗时且重复性高的任务之一。为了解决这一痛点，Element UI 表单设计及代...
[工具推荐] element-ui表单设计/代码生成器
热门推荐
kinghzking的专栏
01-17 1万+
文章目录导读form-generatorform-generatorJFormDesigner参考资料 导读 天下武功，唯快不破。写代码也是这样，在Coding业漫长的进化史中，各种框架层出不穷，程序猿们想了各种方案来帮助自己更快的完成自己的任务。 今天要分享的就是，基于国人自主开发element-ui的几个可视化代码生成器。 form-generator 介绍 gitee星数：2.8K gitee地址： https://gitee.com/mrhj/form-generator 国内预览地址： htt
Element UI 表单设计及代码生成器 - form-generator 教程
gitblog_00013的博客
08-08 1187
Element UI 表单设计及代码生成器 - form-generator 教程 项目地址:https://gitcode.com/gh_mirrors/fo/form-generator 1. 项目介绍 form-generator 是一个基于 Element UI 的表单设计与代码生成器工具。它允许用户通过直观的图形界面设计自定义表单，然后自动生成对应的前端代码，简化开发流程，提高效率。这个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值