博客 / 詳情

返回

任性佈局:一款vue可視化拖拽自由佈局轉flex佈局在線工具,一鍵生成vue代碼

分享一款可視化拖拽自由佈局轉flex佈局在線工具(內置趣味聊天室)
這款工具和大部分可視化拖拽工具不同的是(他採用自由佈局,而非流式佈局),最後根據座標運算,推導出flex佈局代碼(通過增加冗餘樣式,來儘可能適配uniapp h5端和小程序端)

線上demo(電腦端打開):

http://aicode.shagua.wiki/uni/index.html#/

特性

1.可視化,自由拖拽,推導出flex佈局,儘可能兼容多端(h5,微信小程序)

2.支持uviewui內置所有圖標,也可以使用阿里圖標庫160萬+圖標(需填寫網絡路徑)

3.支持在遮罩mask,彈窗Popup,modal 等組件,直接拖拽,繪製

4.對於常用的表單組件,可直接幫你生成相關事件,時間,單列多列等選擇器等支持數據回顯功能(免開發)-- 在拖拽面板中的(formitem 表單項中)

5.右鍵菜單,二十幾種對齊方式,支持單選多選,單行彈性對齊

6.集成網絡上用於解壓的趣味聊天室

7.開發者,可自由創作佈局,然後上傳(共享給其他開發人員使用)

8.支持簡單事件代碼片段

9.支持綁定變量(對象格式,對象數組格式(下標要從0開始)),直接在vue中生成相關格式的數據

部分操作(一套代碼,h5端和微信端通用,其他沒有測試):
簡單操作演示

image

image
image

user avatar
0 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.