任性布局:一款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端和微信端通用,其他没有测试):