基於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

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