vue可视化拖拽生成工具_一款可拖拽的WEB表单设计布局器-(echarts-vue-jquery-可视化图表)...

背景

现在越来越多的业务要求运营可以自由定制化页面，此过程最大的好处就是前端研发不用介入就能完成页面的定制化，大大提升了产品的灵活性，减轻前端工程师的工作量

还有一些场景：用户可以自由定制图表工具，通过配置数据源，x y轴即可达到图表定制化的目的

软件

今天给大家推荐一款前端可视化的布局器

一睹软件外观 在线地址magicalcoder.com用电脑访问

外观

此布局器的最大特点如下

1 支持多种ui(vue jquery react...) element layui antdesign bootstrap miniui vant

2 支持echarts可视化图表

3 布局器的使用就不细说了 拖拽式开发

4 可视化编写脚本js(vue的ui新特性)

5 支持自由拖拽定位+拖拽插入混合模式

6 可嵌入 jquery vue react angular框架的ui

7 快捷键操作

8 自定义皮肤和换肤

9 对齐线 辅助线 网格

10 导航树

11 右键菜单

12 支持样式 脚本 HTML同时编写

13 拖拽改变宽高 旋转

14 自定义组件和属性 只要配置json便可完成

15 支持 二次定制化开发 支持嵌入到您的web系统种 支持扩展基于jquery 或者vue的各种前端开源ui

16 成果物，就是当前ui的代码，自适应移动端,直接面向业务，减轻前端工程师的介入和工作量

17 视频教程+开发文档齐全

... bootstrap 等等都支持

此类布局器 大家最关注的莫过于：

如何自定义组件和属性：MagicalCoder布局器相当简单，大家只要按照文档来配置json即可达到自定义组件和属性

简单看下部分功能吧：

根面板选择是否开启自由定位

网格 对齐线 修改大小

右键功能自定义

双击修改文本

左侧丰富的控件 滚动进度条

各种统计图表

自由定位+拖拽插入混合模式

事件编辑器+可视化写点js

在线帮助文档

其他 快捷键说明

ctrl+方向键微调自由面板的控件位置或普通模板移动节点顺序

ctrl+c复制

ctrl+x剪切

ctrl+v粘贴

ctrl+z撤销修改

ctrl+y重做

ctrl+d向下复制

ctrl+i增加条目

alt+h缩放

delete删除

方向键切换聚焦元素

单击聚焦

双击可以直接改文本

ctrl +点击：修改大小 旋转