vue3 + ant-design-vue 实现可视化表单 拖拽配置生成源码

已于 2024-11-24 16:00:42 修改
阅读量425 收藏 4
点赞数 5
CC 4.0 BY-SA版权
文章标签： vue.js 前端 javascript
于 2024-11-20 00:02:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/csdnxxxjjjqqq/article/details/143898503

本项目基于 vue3.5 + ant-design-vue

日常前端开发后台管理系统时经常会遇到很多有表单的需求,虽然都是简单的需求,但涉及到多字段,以及表单校验的时候总是要消耗很多时间 所以我就想做这样一个可以快速配置一键生成表单的项目 

目前已经实现了基础的界面,拖拽功能以及代码生成功能

可视化表单生成: 利用可视化平台快速生成基于and-design-vue的表单代码快乐摸鱼.快速生成调查问卷表单页面icon-default.png?t=O83Ahttps://gitee.com/xujiaqi1833/form-code-generate-antd

拖拽部分基于鼠标的移动事件来做

大体思路为监听可拖拽小部件的按下事件并将当前小部件的配置信息存储起来,然后监听画布区域的移入事件来添加组件,之后在通过监听每个表单项的移动事件计算得出当前拖拽组件的位置.

zzq_jq
关注
vue-form-craft，基于vue3的开箱即用表单方案
xinnian66aa的博客
02-28 2610
首先祝各位朋友们新年快乐！龙年大吉！在前端开发过程中，表单渲染是重要且繁琐的一环。为了提高开发效率并避免重复工作，我开发了一款基于vue3的表单工具，并取名vue-form-craft（vue表单工艺）。是适用于vue3项目中后台表单的一种通用解决方案。本文将介绍 vue-form-craft 的基本概念、使用方式及高级特性。主要由FormDesign（表单设计器）和SchemaForm（表单渲染器）组成。FormDesign通过拖拽快速生成JsonSchema，SchemaForm。
手把手带你写 Vue 可视化拖拽页面编辑器
weixin_53777231的博客
02-01 1万+
可视化页面编辑器，听起来可望不可即是吧，先来张动图观摩观摩一番！ 实现这功能之前，在网上参考了很多资料，最终一无所获，五花八门的文章，都在述说着曾经的自己！ 那么，这时候就需要自己去琢磨了，如何实现？ 需要考虑到： 拖拽的实现 数据结构的定义 组件的划分 可维护性、扩展性 对象的引用：在这里是我感觉最酷的技巧了，来一一讲解其中的细节吧！！ 拖拽实现 拖拽事件 这里使用 H5的拖拽事件 ，主要用到： dragstart // 开始拖拽一个元素时触发 draggable
Vuejs动态表单，拖拉拽生成
热门推荐
J、wen的博客
03-24 2万+
vue拖拉拽动态表单 之前写了一个jquery的拖来拽表单，但是用到vue项目，太麻烦，于是有重写了一边，虽说差不多，但是对vue还不太了解，写了一个大概，大家不会的可以参考一下，改一改。 jquery/Bootstrap表单动态拖拉拽添加 先分享代码了 ，原理可以看上面jquery的原理，差不多的。 <template> <div class="box"> <h4>这是发布页面<
Vue3 + TypeScript 实战：手把手实现动态表单生成器
最新发布
2301_76277481的博客
04-27 975
在当今数字化的企业运营环境下，企业级后台系统扮演着至关重要的角色。其中，表单作为数据收集和交互的关键组件，其设计的灵活性和高效性直接影响着系统的使用体验和业务流程的顺畅程度。传统的静态表单在面对多业务线复杂多样的表单需求时，显得捉襟见肘。而动态表单生成器的出现，为解决这一难题提供了有效的途径。本文将带领大家深入探索如何使用 Vue3 和 TypeScript 构建一个功能强大的动态表单生成器。
在vue3 setup下基于Ant Design Vue 实现一个可拖拽行的表格
aminwangaa的博客
03-18 1267
2、使用ant design vue Table的customRow属性。1、使用原生的drag事件。
vue拖拽组件生成页面代码,vue可视化拖拽组件模板
神器榜
09-09 1603
构建一个watcher最重要的是expOrFn和cb两个参数，cb是订阅者收到消息后需要执行的回调，一般来说这个回调都是视图指令的更新方法，从而达到视图的更新，但是这也不是必须的，订阅回调也可以是一个和任何无关的纯函数。这里面数据的监听，解析，过滤都由vue的框架完成，开发者只需要写最简单的样式模版进行vue的语法绑定，然后按照业务逻辑对数据本身进行操作，模版引起就自动相对最优的渲染，无需进行繁杂的dom字符串拼接操作。这个新的套件是作为曾经流行但已过时的Interface插件的替代项目而发布的。
Vue3表单拖拽
justdoitttt的博客
05-06 690
【代码】Vue3表单拖拽。
vue3.0项目实现表单拖拽
qq_39189369的博客
07-21 1290
项目采用vue3.0+ts+elementPlus去开发管理后台，但element没有提供表单拖拽的功能，这里可以借用第三方库（SortableJS）来实现次需求。 github地址：https://github.com/SortableJS/Sortable 中文文档：http://www.sortablejs.com/index.html# 使用方式： 1. npm install sortablejs --save 2.在单页面使用importSortablefrom'sorta...
一款高效的Vue低代码表单，可视化设计，一键生成源码
05-04
标题中的“一款高效的Vue低代码表单，可视化设计，一键生成源码”揭示了这是一个基于Vue.js框架的低代码开发工具，特别强调了其高效性、可视化设计以及源码自动生成的功能。这样的工具大大简化了Web应用开发过程，...
vue_form_design:基于Vue3.0的表单设计器
03-16
1. **可视化编辑**：Vue Form Design提供了一个图形化的界面，允许开发者通过拖放操作来创建表单元素，如输入框、选择器、复选框等，极大地提高了开发效率。 2. **自定义组件**：支持用户自定义组件并集成到表单中...
k-form-design:基于Vue的Ant-Design表单设计器
- 可视化操作：k-form-design允许开发者通过可视化的方式进行操作，包括拖拽组件、配置属性等，从而避免了复杂的编码过程。 - 表单验证：该设计器支持表单验证功能，能够根据定义的验证规则检查表单输入的有效性，...
基于SpringBoot+Mybatis+AntDesign快速开发平台
qq_35862393的博客
01-14 2576
基于SpringBoot+Mybatis+AntDesign企业级快速开发平台 引言： Jeecg-Boot一款基于代码生成器的J2EE快速开发框架!采用前后端分离技术: SpringBoot，Mybatis-plus，Shiro，JWT，Vue & Ant Design。提供强大的代码生成器， 前端页面代码和后端代码一键生成！JeecgBoot的宗旨是降低前后端分离的开发...
后端接活儿利器：基于Vue，拖拽一键生成UI界面，简洁漂亮（已开源）
码农code之路
04-30 391
简介基于vue可视化拖拽编辑，页面生成工具。提升前端开发效率，可集成至移动端项目作为通过定义 JSON 直接生成 UI 界面。安装教程npm install（安装 node_modules 模块）npm run serve（运行）npm run build（打包）npm update(用于更新包到基于规范范围的最新版本)注：在新版本的npm中，默认情况下，npm install遇到冲突的p...
Python中常见文件操作,纯干货
a1309525802的博客
09-04 6819
Python文件操作一、关于文件二、读写文件简单操作三、文件权限四、文件高级操作五、大文件的读取基本方法常用函数 一、关于文件 文件的作用：把一些数据储存起来 使用文件流程： 打开文件，读写文件，关闭文件 二、读写文件简单操作 1.读取文件 #打开文件 file = open("demo1/1.txt",mode="r") #读取文件 ret = file.read() #file只是变量，read是读取函数 print(ret) #关闭文件 file.close() #第一个参数的文件的路
让界面“想拖就拖”！深入浅出 Vue3 + AntD + GrapesJS 的可视化交互新体验
qqxdh的博客
02-14 1842
真正的所见即所得 + 样式隔离利用 GrapesJS iframe 特性，通过监听并拷贝主窗口样式，让编辑器视图与实际运行环境保持统一，不再出现“编辑器里看着完美，运行里却跑版”的尴尬。高扩展性GrapesJS 强大的插件机制，配合 Vue3 的组件化思维，加上 Pinia 的全局应用状态管理，能灵活实现各种复杂需求；多 Page弹框抽屉子页面等大交互场景也能轻松应对。动态加载通过import()或其他远程脚本注入，大幅减少了重新编译与部署的成本，为后续模块化、跨项目调用提供了可靠途径；
【VUE】Ant Design Vue实现表格table上下拖拽排序
qq_45797138的博客
03-17 1098
ant design vue实现表格table上下拖拽排序
vue3 + ant-design-vue 可视化表单 表单代码生成
csdnxxxjjjqqq的博客
11-24 379
可视化表单生成: 利用可视化平台快速生成基于and-design-vue的表单代码快乐摸鱼.快速生成调查问卷表单页面。代码生成预览也已经完成。后续将继续完善表单复杂逻辑校验配置，以及完善表单可配置的选项。包括双向绑定变量名配置、各表单字段key配置、表单模式配置。目前已经完成了表单基本字段的配置设置。
Vue 3 搭配 Ant Design Vue：构建专业级前端应用(小白必看)
前端开发探索之旅
02-11 1650
丰富的组件库：涵盖了从基础的按钮、输入框到复杂的表格、表单、树形控件等大量组件，满足各种业务场景的需求。一致性设计：遵循 Ant Design 统一的设计语言，组件风格统一，视觉效果美观，能帮助开发者打造出具有专业感的界面。高度可定制：提供了丰富的配置选项和样式定制能力，允许开发者根据项目需求对组件进行个性化定制。国际化支持：支持多种语言，方便开发全球化的应用。借助工具，可以生成自定义主题。然后按照官方文档的指引生成并引入自定义主题。
Vue3 使用 vuedraggable拖拽排序；禁用 / 拖拽 / 悬浮样式等细节
qq_41662145的博客
02-11 2183
我们为拖拽中的项目和占位符分别定义了.ghost和样式类，以便用户可以清楚地看到当前拖拽的状态。important;important;通过以上步骤，我们成功地使用Vue3和实现了表头字段的拖拽排序，并且能够灵活地控制哪些项目不可拖拽，以及定制拖拽过程中的视觉效果。这不仅提高了用户体验，还增加了界面的交互性和实用性。希望这篇文章能帮助你在自己的项目中实现类似的功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值