基于VUE的ElementUi可视化表单设计器布局器

您是否有过如下想法：
    我是一名element初学者，我想以最短的时间快速进入 element 的大门
    我是一名后端工程师，虽能熟练掌握 JS 的写法，可是页面样式布局让我很头疼
    我是一名创业者或者团队 Leader，若是能有一款软件下降团队或者个人开发门槛，提高效率和体验，就行了
    我正在寻找一款能嵌入工做流，Sass,Pass 等系统的可视化 WEB 表单设计器，让用户本身经过咱们提早自定义好的组件，拖拽布局配置，完成软件某个环节的自动化
    我想把系统中的富文本编辑器替换成一款更灵活，更高定制化的编辑器，让用户或者咱们的运营，编辑可以自行拖拽设计界面布局，图片，文字，表格等等，这样就减小了程序员的投入
    ...
若是您有以上任一想法，那就一块儿来围观下吧

下面给你们介绍下这款软件目前已经稳定版 功能列表以下：
      左侧自定义的各类组件，能够拖拽到工做区
      中间工做区 （视图|预览|HTML|脚本 各类工做模式适应不一样使用人员）JS脚本支持调试排查
      右侧属性配置
      左下侧 基于结构的组件描述导航树（也能够拖拽排序 插入 删除等等）
      扩展工具：样式工具箱（知足自定制界面）  
      如何自定义组件和属性，调用布局器的API
 

能够采用 http://lowcode.magicalcoder.com/element 这一款web布局器比较适合  也能够访问www.magicalcoder.com到首页查看 有各类ui的（好比Layui bootstrap等等）布局器可供选择 目前浏览器兼容性

IE9 IE10 IE11 IEdge 更高版本IE

Chrome、FireFox等其余基于webKit的浏览器全兼容 

预览：看一下最终效果

顶部还有HTML 彻底是基于elementui的写法 100%契合官方标准

脚本： 布局器已经为咱们生成了一些默认的初始化脚本

 

试试改一下脚本 加入一行测试代码  alert(1)

效果立马就出来了

咱们来时候调试一下脚本 毕竟不少场景 不能盲敲 启动调试模式：

打开咱们的浏览器控制台 chrome是F12快捷键 咱们点击一下脚本 在点击一下视图 模式 注意看 调试功能即可激活 而后就是浏览器的调试功能了

若是您以为当前调试 不习惯，还能够打开新窗口 进行调试 那就跟平时开发彻底同样了

样式工具箱：若是咱们要更精细化控制页面怎么办呢 好比控制宽度

或者改改字体颜色 总之此工具箱能够知足超出当前UI以外的个性化定制

功能演示了一下，下面来讲说自定义组件和属性 访问首页 www.magicalcoder.com下载布局器 这是一款离线版体验版本 

html\使用文档.md  若是您是windows系统 直接双击启动.bat 若是是mac那进入html文件夹 使用代理 经过localhost访问index.html

下面给你们讲一下高阶应用：
如何跟布局器交互：完善的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}]}
                    ]

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

http://lowcode.magicalcoder.com/element?from=oschina

更多功能 仍是来本身探索吧