提起表單設計器,網上會有很多,不過能讓設計器可視化寫腳本的還真是鳳毛麟角
直接給大家上地址:http://lowcode.magicalcoder.com/magicaldrag/index-page.html
下面介紹一下這款佈局器的特點 先來看一下整體預覽
特性:1 支持多種ui element layui
2 支持 二次定製化開發 支持嵌入到您的web系統種 支持擴展基於jquery 或者vue的各種前端開源ui
3 佈局器的使用就不細說了 拖拽式開發
4 可視化編寫腳本(新特性)
本節主要展現下基於elementui的可視化腳本功能
示例一:點擊提交按鈕 觸發一下 彈出一個 “歡迎使用magicalcoder佈局器”
第一步:點擊提交按鈕 由此編碼區域有個按鈕點擊一下 即可調出可視化腳本編輯器
第二步:我們拖拽一個彈窗工具 然後配置一下要彈出的內容
第三步 保存後我們來點擊提交按鈕試試看 再點擊一下就彈出了我們要的交互內容
示例二: 我們來做一個高級的 當滑塊內容變化時 讓輸入框內容也跟着變化
第一步:點擊滑塊 右側的鬆手觸發事件我們來開發
第二步:利用賦值語句 我們讓輸入框的值=滑塊停止時當前的值 注意右側會有提示
第三步:演示下 當我鬆開滑塊 輸入框的值也就跟着變化了
更多場景 還是大家自己去體驗吧