分享一款 layui 可视化拖拽布局器,欢迎大家来围观~

分享 未结 精帖 15 5269
月上柳梢头
悬赏:100飞吻

您是否有过以下想法:

● 我是一名 Layui 初学者,我想以最短的时间快速进入 Layui 的大门
● 我是一名后端工程师,虽能熟练掌握 JS 的写法,但是页面样式布局让我很头疼
● 我是一名创业者或者团队 Leader,如果能有一款软件降低团队或者我的开发门槛,提升效率和体验,就好了
● 我正在寻找一款能嵌入工作流,Sass,Pass 等系统的可视化 WEB 表单设计器,让用户自己通过我们提前自定义好的组件,拖拽布局配置,完成软件某个环节的自动化
● 我想把系统中的富文本编辑器替换成一款更灵活,更高定制化的编辑器,让用户或者我们的运营,编辑能够自行拖拽设计界面布局,图片,文字,表格等等,这样就减少了程序员的投入
● ...

如果您有以上任一想法,那就一起来围观下吧

下面给大家介绍下这款软件目前已经稳定版 功能列表如下:
[心] 左侧自定义的各种Layui组件,可以拖拽到工作区
[心] 中间工作区 (视图|预览|HTML|脚本 各种工作模式适应不同使用人员)JS脚本支持调试排查
[心] 右侧属性配置
[心] 左下侧 基于结构的组件描述导航树(也可以拖拽排序 插入 删除等等)
[心] 扩展工具:样式工具箱(满足layui以外的自定制界面)
[心] 如何自定义组件和属性,调用布局器的API

软件预览:



左侧组件:放置了layui官方提供的常用组件和容器,轻松拖拽到中间即可完成布局,还可以无限添加新的组件,所见所得


中间工作区:提供多种工作模式 满足不同身份使用者
视图:会把显示辅助边框



预览:99.99%接近最终效果



HTML:编写layui的html,试试导入您已经写过的layu html 注意是<body></body>区域内的html



脚本:在线编写javascript脚本,让你的界面更加自由化



脚本调试:写了脚本不知道怎么调试?开启调试按钮,打开浏览器控制台,然后从脚本模式切换至视图模式,即可激活调试工具


右侧属性面板:以一个动态表格为例



简单配置一下 即可预览,想想大家日常开发中动态表格的功能都类似,那么就可以定制一个自己的表格,交互部分JS提前写好, 以后用到直接拖拽进来。



属性是根据layui官方文档进行配置,支持自定义各种属性

导航树:为我们实时展示页面上的组件 您也可以通过操作导航树来操作界面布局,可以拖拽导航树



多种设备端实时预览效果:



样式工具箱:额外为您提供更多样式控制



下面给大家讲一下高阶应用:
如何跟布局器交互:完善的API调用



如何自定义组件和属性:
第一步:打开assets/drag/js/business/user/ui/layui/2.5.4/constant.js 配置左侧拖拽源组件
在this.components中增加
 {
name:"输入框",
icon:"assets/drag/img/left/import1.png",
html:"<input type='text' autocomplete='off' class='layui-input'/>"
}
左侧就会出现一个可拖拽区
第二步:定义组件各种规则行为
tagClassMapping配置在导航树的名称已经此节点的各种限制功能
"type=text":{name:"输入框",treeExtraName:{attr:['id','name'],text:false},dragInto:false,duplicate:true, copy:true,      paste:false,    canDelete:true},
第三步:配置右侧属性
"type=text":[
{type:this.type.TEXTAREA,clearAttr:true,oneLine:true,change:this.change.ATTR,attrName:'value',title:'值'},
{type:this.type.TEXT,clearAttr:true,oneLine:true,change:this.change.ATTR,attrName:'placeholder',title:'提示文本'},
{type:this.type.CHECKBOX,clearAttr:true,oneLine:true,change:this.change.ATTR,title:'禁用',options:[{"c":true,"n":"disabled","t":"禁用","u":false}]},
{type:this.type.CHECKBOX,clearAttr:true,oneLine:true,change:this.change.ATTR,title:'只读',options:[{"c":true,"n":"readonly","t":"只读","u":false}]}
],

便完成了一个控件的定义。



具体可以参考官方详细文档 每一个字段都有说明


MagicalDrag 稳定版地址: http://lowcode.magicalcoder.com/layui?from=layui

回帖
  • 没啥卵用,随写页面还靠拖拽?dreamview那么牛逼怎么没人用了?花这么多时间搞一个拖拽布局还不如写一个好用的框架
    5 回复
  • 汪杰
    2019-9-11
    unbelievable
    1 回复
  • @小哥哥小姐姐 用对地方就好啦,商用项目或者后端工程师使用,杠杠的。前端老手当然就不需要啦[嘻嘻]
    1 回复
  • 挺好的,作为工具使用还是不错的,面向后端挺好的,直接省去了写html比markdown好用![good]
    1 回复
  • 守鹤ww
    2019-9-22
    [good]
    1 回复
  • [给力] [给力]
    0 回复
  • 我一般把html放进去就大概晓得它是什么样子了,无非是做一些微调
    0 回复
  • 难得920
    2019-9-12
    很早前就见过这个了
    0 回复
  • 强与势
    2019-9-13
    我觉得好用
    0 回复
  • 强与势
    2019-9-13
    我还专门发过一次帖子. 不过没这么详细. 难怪沉了. 下次也要这么详细
    0 回复