js html表单设计器,可视化表单设计器拖拽生成表单(原创)

插件描述：可以通过拖拽的方式快速创建表单，提高开发者对表单的开发效率，节省开发者的时间。

更新时间：2021-04-11 21:56:01

form-create-designer

form-create-designer 是基于 @form-create/element-ui 实现的表单设计器组件。可以通过拖拽的方式快速创建表单，提高开发者对表单的开发效率，节省开发者的时间。

安装npm install @form-create/designer

引入

CDN:

NodeJs:

请自行导入ElementUI并挂载import formCreate from '@form-create/element-ui'

import FcDesigner from '@form-create/designer'

Vue.use(formCreate)

Vue.use(FcDesigner)

使用

组件propsmenuMenuList 重新配置拖拽的组件

heightint|string 设计器组件高度, 默认100%

组件方法获取当前生成表单的生成规则type getRule = () => Rule[]

示例:this.$refs.designer.getRule()获取当前表单的全局配置type getOption = () => Object设置当前生成表单的规则type setRule = (rules: Rule[]) => void;设置当前表单的全局配置type setOption = (option: Object) => void;增加一组拖拽组件type addMenu = (menu: Menu) => void;删除一组拖拽组件type removeMenu = (name: string) => void;批量覆盖插入拖拽组件type setMenuItem = (name: string, items: MenuItem[]) => void;插入一个拖拽组件到分组type appendMenuItem = (name:string, item: MenuItem) => void;删除一个拖拽组件type removeMenuItem = (item: string | MenuItem) => void;新增一个拖拽组件的生成规则type addComponent = (item: DragRule) => void;

提示! 内置的三个组件分组name分别为: main,aide,layout

js html表单设计器,可视化表单设计器拖拽生成表单(原创)相关推荐

多款顶级好用的 Vue 表单设计器测评推荐，可拖拽生成表单
本文完整版:<多款顶级好用的 Vue 表单设计器测评推荐,可拖拽生成表单> Vue 表单设计器 form-generator - 适配 Element Plus UI 框架的表单设计器 f ...
html5拖拽表单设计器,require+jquery+backbone实现拖拽式报表设计器-拖拽式表单设计器...
HTML我帮您-拖拽式报表设计器-拖拽式表单设计器是一个可视化设计器,基于require+jquery+backbone+underscore+bootstrap实现的表单设计器.思想来源于 Layo ...
vue可视化拖拽生成工具_vdesjs: 基于vue的可视化拖拽，代码生成工具。提升前端开发效率，或者集成至项目作为在线拖拽工具。（持续迭代升级中）...
vdesjs 介绍 vdesjs是一款基于vue技术栈,可视化拖拽,代码生成工具.我们提供详细的文档来帮助您理解我们工具的实现原理,并且您可以方便的基于vdesjs来扩展您自己的代码生成组件. 技术选 ...
php移动端可拖动可视化,可视化编辑uniapp项目DIY拖拽
更新记录 1.0.5(2021-02-19) 更改配置名称 1.0.4(2021-02-19) 添加地图查看更多可视化编辑uniapp项目DIY拖拽通过CMS可视化编辑uniapp,原理只是操作 ...
可视化拖拽生成小程序，傻瓜式免开发实现一款属于自己的小程序，云开发低码入坑指北
前两天无意间知道了一种可以免开发,傻瓜式的拖拽生成小程序的一种方式.瞬间感觉作为程序员的石头哥离失业不远了.... 好在石头哥是一个爱学习的石头.所以今天就来看看这种靠拖拽生成小程序的平台是何方神圣. ...
js 拖拽生成html,js拖拽插件 js 拖拽控件生成自定义表单怎么实现
想请教一个js的问题,拖拽控件 js 拖拽控件生成自定义表单怎么实现说说步骤吧监听mousedown事件 - 获取鼠标点击元素,判断是否可拖拽 - 设置flag做标记 - 建一个tempDOM, ...
vue可视化拖拽生成工具_一款可拖拽的WEB表单设计布局器-(echarts-vue-jquery-可视化图表)...
背景现在越来越多的业务要求运营可以自由定制化页面,此过程最大的好处就是前端研发不用介入就能完成页面的定制化,大大提升了产品的灵活性,减轻前端工程师的工作量还有一些场景:用户可以自由定制图表工具,通 ...
html实现拖拽自定义表单,自定义表单（二）--拖拽（HTML版本）
系列文章自定义表单(一)--拖拽(JS版本) 自定义表单(二)--拖拽(HTML版本) 自定义表单(完)--(html5版本) 一.瞎扯最近在折腾人工智能,今天写了段tensorflow,用来分辨 ...
vue可视化拖拽生成工具_GitHub - 1260215278/dragUI: 基于vuedraggable.js + uni 的可视化拖拽编程，自动生成项目，自动生成代码，自行导入第三方组件...
dragUI 用于UNI可拖拽可视化编程在线演示效果图基于快速开始参考uni官网安装普通uni项目(运行uni-app)运行到浏览器另需要手动下载包npm install 项目目录 col ...

js html表单设计器,可视化表单设计器拖拽生成表单(原创)

js html表单设计器,可视化表单设计器拖拽生成表单(原创)相关推荐

最新文章

热门文章