背景
现在越来越多的业务要求运营可以自由定制化页面,此过程最大的好处就是前端研发不用介入就能完成页面的定制化,大大提升了产品的灵活性,减轻前端工程师的工作量
还有一些场景:用户可以自由定制图表工具,通过配置数据源,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 视频教程+开发文档齐全
http://lowcode.magicalcoder.com/magicalcoder/index-element.html基于Element-ui
http://lowcode.magicalcoder.com/magicalcoder/index-layui.html基于Layui
http://lowcode.magicalcoder.com/magicalcoder/index-antdesign.html基于Ant-Design
... bootstrap 等等都支持
此类布局器 大家最关注的莫过于:
如何自定义组件和属性:MagicalCoder布局器相当简单,大家只要按照文档来配置json即可达到自定义组件和属性
简单看下部分功能吧:
如果想了解怎么嵌入自己系统 不妨看看此文档 http://www.magicalcoder.com/doc/bjq/html/
其他 快捷键说明
ctrl+方向键微调自由面板的控件位置或普通模板移动节点顺序
ctrl+c复制
ctrl+x剪切
ctrl+v粘贴
ctrl+z撤销修改
ctrl+y重做
ctrl+d向下复制
ctrl+i增加条目
alt+h缩放
delete删除
方向键切换聚焦元素
单击聚焦
双击可以直接改文本
ctrl +点击:修改大小 旋转