Form Generator扩展 拖拽增加[ 撤销重做 ]操作

已于 2023-07-13 10:27:42 修改
阅读量360 收藏 3
点赞数 1
分类专栏： form generator扩展组件系列 (超级详细) 文章标签： vue.js 前端 javascript
于 2023-03-22 09:05:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_19991931/article/details/129667420
版权
本文介绍了如何在form-generator中扩展撤销重做功能，利用Vue的Vuex进行状态管理，并通过事件总线(EventBus)实现组件间的通信。详细讲解了history.js、index.js、event-bus.js等文件的添加和修改，以及在main.js中的应用。最后强调了render渲染函数在vuejs框架中的重要性。
摘要由CSDN通过智能技术生成

一、form-generator是什么？✨ ⭐️ 🌟 

form-generator的作者是这样介绍的：Element UI表单设计及代码生成器，可将生成的代码直接运行在基于Element的vue项目中；也可导出JSON表单，使用配套的解析器将JSON解析成真实的表单。

但目前它提供的组件并不能满足我们在项目中的使用。所以该专栏主要讲解如何在该项目中从零开始扩展每一个组件。

扩展主要包含Element UI中的卡片、步骤条、table列表、折叠面板、树形控件以及自定义组件等等10余个组件的详细扩展方法。

其中不包含子表单、表格布局。因为这两个组件涉及到的代码量实在很大，没办法写博文。感兴趣的小伙伴可以看看大概的效果

了解本专栏 订阅专栏 解锁全文
Etc.End
关注
专栏目录
订阅专栏
Form Generator扩展 Element Steps 步骤条
Etc.End的博客
03-15 656
form-generator中一个非常重要的东西就是render渲染函数。它不仅在这个项目里面，在整个vuejs框架中也是非常的核心。跟template模板开发一样，但是它更接近底层。如果你还不了解render，或者还不是很熟悉的话。建议多看看，多写写。后续不管是普通开发，还是组件的封装。它肯定能给你带来不一样的惊喜。😁 😁 😁我是Etc.End。同时欢迎各位小伙伴一起学习，一起成长WX:👉SH--TS👈。
web前端手册
caiqian97的博客
08-28 1764
HTML基础 1. HTML 文件中的 DOCTYPE 是什么作用？ HTML超文本标记语言: 是一个标记语言, 就有对应的语法标准 DOCTYPE 即 Document Type，网页文件的文档类型标准。 主要作用是告诉浏览器的解析器要使用哪种 HTML规范 或 XHTML规范 来解析页面。 DOCTYPE 需要放置在 HTML 文件的 <html>标签之前，如： <!DOCTYPE html> <html> ... </html> (目前主流) &
Form-Generator拖拽表单的使用+二次修改
wwming的日记本
06-20 8565
FormGenerator拖拽表单 本文讲述了form-generator项目基于Vue框架以及ElementUI组件实现拖拽表单完成项目及二次开发 gitee地址 ： https://gitee.com/mrhj/form-generator?_from=gitee_search 简介 Element UI表单设计及代码生成器，可将生成的代码直接运行在基于Element的vue项目中；也可导出JSON表单，使用配套的解析器将JSON解析成真实的表单。 使用 在左侧点击组件或拖拽组件到画板 ， 生成
开源项目 `form-generator` 使用教程
最新发布
gitblog_00127的博客
08-08 338
开源项目 form-generator 使用教程 form-generator:sparkles:Element UI表单设计及代码生成器项目地址:https://gitcode.com/gh_mirrors/fo/form-generator 1. 项目的目录结构及介绍 form-generator 项目的目录结构如下： form-generator/ ├── public/ │ ├── ...
form-generator:简单表格生成器
05-21
生成器 ＃在终端中的用法-git clone 表单生成器-nodejs server.js >> 将Form构造函数与您的自定义道具一起使用使用一些公共方法获取Form对象。 var yourForm = new Form（yourprops）; #Example：$ .get（'../ json / response.json'，function（data）{var testForm = new Form（data）; $（'body'）。append（testForm.form.get（））; }）; #Methods：公共：yourForm.fields.get（）-返回包含已创建字段的数组。 yourForm.form.get（）-返回整个表单，您可以追加所需的任何内容； ＃典型结构应如下所示： { "method": "POST", "url": "/f
Android开源经典项目
Tamic （大白）
09-13 5749
Android开源项目大全，包括经典个人博客，组织和开源项目
iOS：iOS开发非常全的三方库、插件等等
dienangpiao2051的博客
09-23 7453
iOS开发非常全的三方库、插件等等 github排名:https://github.com/trending, github搜索：https://github.com/search. 此文章转自github:https://github.com/Tim9Liu9/TimLiu-iOS 一、UI 下拉刷新 EGOTableViewPullRefresh- 最早...
前端开发实习面经总结
xq66660821的博客
04-06 1339
面经一： 1. 拖拽实现列表排序 描述：有一个列表，列表里面有十条记录，每一行是一条记录。在每一个记录的后面进行一个拖页的动作，以此进行列表的排序。 思路：转载至https://blog.csdn.net/azuretodd/article/details/109973228 <li class="li_row" v-for="(item,index) in linkData " :key=index draggable="true" @dragstart="drag(
web学习笔记
热门推荐
刘群智的博客
07-27 1万+
常用属性............................................................................................ 1 Html基础........................................................................................... 3 ...
form-generator：元素UI表单设计及代码生成器
02-06
简介 元素UI表单设计及代码生成器，可将生成的代码直接运行在基于元素的vue项目中；也可生成JSON表单，使用配套的解析器将JSON解析成真实的表单。 【】【】 【 】【】 友情链接 vue-admin-beautiful- vue-admin-beautiful- pl- 文件 系列教程： JSON解析器 将保存在数据库中的JSON表单，解析成真实的表单 // 安装 npm i form-gen-parser vscode插件 帮助使用元素UI的开发者完成基本的表单代码构建任务，减少重复的劳动。 vscode-plugin分支配套插件为： ；使用插件可快捷打开设计器，直接将代码
Form Generator添加自定义组件，文本组件
letgooo0的博客
05-16 1484
Form Generator扩展自定义组件，文字类型，支持修改字号颜色粗细对齐方式。
form-generator表单生成器使用总结~~
qq_29263331的博客
11-14 1万+
表单设计器中开发自定义组件流程 src\components\generator\config.js 中添加一个json src\compontnes\目录下创建对应的组件 main.js中全局注册刚创建的组件 src\views\index\RightPanel.vue 中绑定第一步中json中添加的各个属性值 详细步骤 步骤一： src\components\generator\config.js 中添加一个json export const layoutComponents = [ {
基于vue3实现画布操作的撤销与重做
qq_37656005的博客
07-27 1123
vue3项目中实现在canvas画布上实现画节点和连线功能，要求可以撤销重做。
vue3【实战】可撤销重做的 input 输入框
朝阳39的博客
06-03 766
/ 自动聚焦到输入框，避免失焦。// 自动聚焦到输入框，避免失焦。
Vue3 区域绘制,有撤销、重置和判断线段重合功能
weixin_43029943的博客
05-25 1343
Vue3 区域绘制,有撤销、重置和判断线段重合功能
vue实现的一个撤销和恢复功能
qq_42783273的博客
04-14 6074
使用vue实现得一个撤销和回退功能 有三个表格 添加不同得数据 在点击撤销时删除最后一条添加得数，在点击恢复删除的数据 <template> <div style="width:1000px;margin:0 auto"> <Button type="info" @click="handleOk">添加</Button> <Table :columns="columns" :data="datas"><
采用d3开发流程设计器（七）实现撤销、恢复的功能
飞天代码的博客
06-16 884
撤销和恢复一开始是不想做的，但后来感觉这个功能还是有点必要的，就只好加上了。 需求：这里就不介绍了，就是个操作的前进后退功能。 其实原理蛮简单的，就是做一些操作的时候将前进、后退操作指令以及相关参数传递给操作事件监听类。 注意这里的参数一定是数据层面的，不能有对象层面的传递。 //添加事件操作监听 this.flowDesCtl.flowStackWatch.push( "window.flowDesCtl.removeNode", "window.flowDesCt
从零搭建低代码平台（十）编辑区中撤销和重做功能的实现
qq_47876165的博客
05-23 1119
目录 大体介绍 具体思路 代码实现 大体介绍 撤销：当移动或者引入组件发生错误的时候能够实现回溯的效果。 重做：当撤销的操作发生错误的时候能过实现撤销“撤销”的效果 在这一篇文章中我们就是打算实现这个功能，我打算用一个容器来存储所有已经进行的操作，我们通过对这个栈的压栈等操作来实现撤销和重做的功能。 具体思路 这一部分可能比较难以理解，就是我每次进行一次操作，就给这个操作进行一次命名，并将这一次操作压入栈中，并且给这个栈添加一个指针，在没有进行撤销和重做操作的时候，指针一直指向栈低的元
form generator扩展 el-select 远程搜索
11-05
综上所述，要扩展form generator中的el-select的远程搜索功能，我们需要为el-select添加一个remote-search属性，处理该属性对应的远程搜索逻辑，并在搜索结果返回后更新el-select的下拉选项列表。这样，用户在使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Etc.End

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值