可視化H5布局器(Magical Drag)

Magical Drag是基于h5實(shí)現(xiàn)的自由布局器，拖拖拽拽就能滿足您的設(shè)想，即時(shí)預(yù)覽布局；如果再結(jié)合我們的代碼生成器，更能讓你在自動(dòng)生成基本的管理后臺(tái)功能后，再次隨心所欲的修改界面布局。有需要的小伙伴歡迎來(lái)西西下載體驗(yàn)。

使用方法：

軟件都在html里面

您可以使用idea直接打開(kāi)start.html 總之必須采用localhost方式打開(kāi)

windows用戶直接雙擊啟動(dòng).bat 即可 打開(kāi)瀏覽器訪問(wèn) http://localhost:12345/magicaldrag/start.html 請(qǐng)盡量使用chrome訪問(wèn) 獲取最優(yōu)體驗(yàn)

手動(dòng)啟動(dòng)：雙擊ngxin.exe 打開(kāi)瀏覽器訪問(wèn) http://localhost:12345/magicaldrag/start.html

更新日志：

callback.js中增加

    before_click_left_component_to_center

    after_click_left_component_to_center

    增加 right_menu配置 可以自定義右鍵面板菜單功能

屬性

    標(biāo)題采用友好的tooltips,只需要配置屬性的tooltip

    增加節(jié)點(diǎn)是否可以拖拽寬高配置

增加其他UI框架 AntDesign,Vant,Miniui,Vuetify

支持多個(gè)key并存校驗(yàn) 減少多種環(huán)境切換的麻煩

key.js中采用

            /*軟件運(yùn)行允許的域名對(duì)：防破解 具體配置在application-env.js*/

            keys:env.keys,

application-env.js中采用

            keys:[

                {

                    //允許的域名

                    domain:"",

                    //發(fā)放的加密串 請(qǐng)咨詢www.magicalcoder.com

                    secret:"",

                }

            ]

增加表格的合并 拆分 新增行列 刪除行列

重構(gòu)部分文件目錄 更加精簡(jiǎn)

index-xxx.html引入<script type="text/javascript" src="assets/drag/js/lib/redips/redips-table-min.js"></script>

同時(shí)注意新版此min文件所在目錄

常見(jiàn)問(wèn)題答疑： 

問(wèn)：此為深入使用布局器，期望有些組件的屬性比如下拉框 能夠動(dòng)態(tài)的根據(jù)后臺(tái)返回來(lái)設(shè)置 

答：您需要使用布局器的api+callback便可實(shí)現(xiàn)，具體做法如下     

方案一：實(shí)時(shí)刷新調(diào)用         

在callabck.js的pre_build_attrs(每次在構(gòu)建屬性之前)里注入以下邏輯方法         

調(diào)用api.getConstant()拿到constant.js的實(shí)例，然后動(dòng)態(tài)修改this.rightPanel的某個(gè)組件的屬性         

最后需要調(diào)用一下api.refreshRightAttrPane();使之生效     

方案二：僅在布局器加載后調(diào)用一次         

在callback.js的after_start(布局器加載完畢)         

里注入以下邏輯方法         

調(diào)用api.getConstant()拿到constant.js的實(shí)例，然后動(dòng)態(tài)修改this.rightPanel的某個(gè)組件的屬性         

最后需要調(diào)用一下api.refreshWorkspace();使之生效 以上方案同樣適用于自定義左側(cè)組件源     

最后調(diào)用一下api.rebuildLeftComponents();刷新一次左側(cè)源的事件