背景
現(xiàn)在越來越多的業(yè)務(wù)要求運(yùn)營可以自由定制化頁面球订,此過程最大的好處就是前端研發(fā)不用介入就能完成頁面的定制化刘陶,大大提升了產(chǎn)品的靈活性,減輕前端工程師的工作量
還有一些場景:用戶可以自由定制圖表工具,通過配置數(shù)據(jù)源兢卵,x y軸即可達(dá)到圖表定制化的目的
軟件
今天給大家推薦一款前端可視化的布局器
一睹軟件外觀?在線地址magicalcoder.com用電腦訪問
此布局器的最大特點(diǎn)如下
1 支持多種ui(vue jquery react...) element layui antdesign bootstrap miniui vant
2 支持echarts可視化圖表
3 布局器的使用就不細(xì)說了 拖拽式開發(fā)
4 可視化編寫腳本js(vue的ui新特性)
5 支持自由拖拽定位+拖拽插入混合模式
6 可嵌入 jquery vue react angular框架的ui
7 快捷鍵操作
8 自定義皮膚和換膚
9 對(duì)齊線 輔助線 網(wǎng)格
10 導(dǎo)航樹
11 右鍵菜單
12 支持樣式 腳本 HTML同時(shí)編寫
13 拖拽改變寬高 旋轉(zhuǎn)
14 自定義組件和屬性 只要配置json便可完成
15 支持 二次定制化開發(fā) 支持嵌入到您的web系統(tǒng)種 支持?jǐn)U展基于jquery 或者vue的各種前端開源ui
16 成果物,就是當(dāng)前ui的代碼绪颖,自適應(yīng)移動(dòng)端,直接面向業(yè)務(wù)苫耸,減輕前端工程師的介入和工作量
17 視頻教程+開發(fā)文檔齊全
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 等等都支持?
此類布局器 大家最關(guān)注的莫過于:
如何自定義組件和屬性:MagicalCoder布局器相當(dāng)簡單见转,大家只要按照文檔來配置json即可達(dá)到自定義組件和屬性
簡單看下部分功能吧:
如果想了解怎么嵌入自己系統(tǒng) 不妨看看此文檔?http://www.magicalcoder.com/doc/bjq/html/
其他 快捷鍵說明
ctrl+方向鍵微調(diào)自由面板的控件位置或普通模板移動(dòng)節(jié)點(diǎn)順序
ctrl+c復(fù)制
ctrl+x剪切
ctrl+v粘貼
ctrl+z撤銷修改
ctrl+y重做
ctrl+d向下復(fù)制
ctrl+i增加條目
alt+h縮放
delete刪除
方向鍵切換聚焦元素
單擊聚焦
雙擊可以直接改文本
ctrl +點(diǎn)擊:修改大小 旋轉(zhuǎn)