必須知道的幾款優(yōu)秀可視化表單、流程開源設(shè)計器
前言
隨著互聯(lián)網(wǎng)的快速發(fā)展,越來越多的云建站平臺快速崛起,不可避免的就是自定義可視化設(shè)計,如何不通過開發(fā)就能夠簡單快速的搭出一個可用的頁面就成了大家頭痛的問題,但是從零開始開發(fā)設(shè)計一套可視化設(shè)計功能并不是一個簡單的事情,還好有很多開源的可視化設(shè)計項目/組件可以供我們使用,今天我們就來看看這些開源可視化設(shè)計項目。
一、FormRender
易用的跨組件體系的表單渲染引擎 - 通過 JSON Schema 快速生成自定義表單配置界面
Github Star 數(shù) 1938 , Github 地址:https://github.com/alibaba/form-render/stargazers 官方文檔地址:https://x-render.gitee.io/form-render
協(xié)議:
- 遵循 MIT 協(xié)議
- 請自由地享受和參與開源
- 如上圖,使用 Schema 編輯器 快速生成可實現(xiàn)低上手成本、快速搭建
- 支持 Ant Design 和 Fusion Design 主流的視覺主題
- 使用 JSON Schema 標準協(xié)議描述表單配置,并搭配豐富類型且可擴展的組件
- 支持 1 排 N、橫縱排、支持對象無限嵌套、自定義正則校驗、自定義樣式組件、列表拖拽等特性
- 已在阿里云、淘寶、天貓、飛豬、亞博科技、安全智能、新零售行業(yè)工作臺、人工智能實驗室等多 BU 多場景使用,簡單使用同時支持復(fù)雜場景使用
- 使用上有詳細文檔,維護上有專人支持
二、form-generator
Element UI表單設(shè)計及代碼生成器,可將生成的代碼直接運行在基于Element的vue項目中;也可導出JSON表單,使用配套的解析器將JSON解析成真實的表單。
GiteeStar 數(shù) 1.3K, Gitee地址:https://gitee.com/mrhj/form-generator?_from=gitee_search 演示地址:https://mrhj.gitee.io/form-generator/#/
協(xié)議:
- 遵循 MIT 協(xié)議
三、f-render | 基于 ElementUI 的表單設(shè)計器
f-render 是基于 vue-ele-form 開發(fā)的可視化表單設(shè)計工具, 適用于 各種流程引擎和動態(tài)表單項目,大大節(jié)省你的開發(fā)時間;
GiteeStar 數(shù) 1.1K, Gitee地址:https://gitee.com/dream2023/f-render?_from=gitee_search 演示地址:https://dream2023.gitee.io/f-render/
協(xié)議:
- 未聲明
四、easy-flow
基于VUE+JsPlumb的流程設(shè)計器
Gitee Star 數(shù) 1938 , Gitee地址:https://gitee.com/xiaoka2017/easy-flow 演示地址:http://xiaoka2017.gitee.io/easy-flow/#
協(xié)議:
- 符合項目package.json中使用的插件中規(guī)定的協(xié)議即可
功能介紹
- 支持拖拽添加節(jié)點
- 點擊線進行設(shè)置條件
- 支持給定數(shù)據(jù)加載流程圖
- 支持畫布拖拽
- 支持連線樣式、錨點、類型自定義覆蓋
- 支持力導圖
免責聲明:本文內(nèi)容由21ic獲得授權(quán)后發(fā)布,版權(quán)歸原作者所有,本平臺僅提供信息存儲服務(wù)。文章僅代表作者個人觀點,不代表本平臺立場,如有問題,請聯(lián)系我們,謝謝!