一款自帶可視化編寫js腳本的表單設計佈局器

提起表單設計器,網上會有很多,不過能讓設計器可視化寫腳本的還真是鳳毛麟角

直接給大家上地址:http://lowcode.magicalcoder.com/magicaldrag/index-page.html

下面介紹一下這款佈局器的特點 先來看一下整體預覽

特性:1 支持多種ui  element layui

           2 支持 二次定製化開發 支持嵌入到您的web系統種 支持擴展基於jquery 或者vue的各種前端開源ui

           3 佈局器的使用就不細說了 拖拽式開發

           4 可視化編寫腳本(新特性)

本節主要展現下基於elementui的可視化腳本功能

示例一:點擊提交按鈕 觸發一下 彈出一個 “歡迎使用magicalcoder佈局器”

第一步:點擊提交按鈕 由此編碼區域有個按鈕點擊一下 即可調出可視化腳本編輯器

第二步:我們拖拽一個彈窗工具 然後配置一下要彈出的內容

第三步 保存後我們來點擊提交按鈕試試看 再點擊一下就彈出了我們要的交互內容

示例二: 我們來做一個高級的 當滑塊內容變化時 讓輸入框內容也跟着變化

第一步:點擊滑塊 右側的鬆手觸發事件我們來開發

第二步:利用賦值語句 我們讓輸入框的值=滑塊停止時當前的值 注意右側會有提示

第三步:演示下 當我鬆開滑塊 輸入框的值也就跟着變化了

更多場景 還是大家自己去體驗吧

http://lowcode.magicalcoder.com/magicaldrag/index-page.html

發佈了37 篇原創文章 · 獲贊 34 · 訪問量 9萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章