前言

隨著互聯(lián)網(wǎng)的快速發(fā)展，越來越多的云建站平臺(tái)快速崛起，不可避免的就是自定義可視化設(shè)計(jì)，如何不通過開發(fā)就能夠簡(jiǎn)單快速的搭出一個(gè)可用的頁(yè)面就成了大家頭痛的問題，但是從零開始開發(fā)設(shè)計(jì)一套可視化設(shè)計(jì)功能并不是一個(gè)簡(jiǎn)單的事情，還好有很多開源的可視化設(shè)計(jì)項(xiàng)目/組件可以供我們使用，今天我們就來看看這些開源可視化設(shè)計(jì)項(xiàng)目。

一、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é)議
• 請(qǐng)自由地享受和參與開源
• 如上圖，使用 Schema 編輯器 快速生成可實(shí)現(xiàn)低上手成本、快速搭建
• 支持 Ant Design 和 Fusion Design 主流的視覺主題
• 使用 JSON Schema 標(biāo)準(zhǔn)協(xié)議描述表單配置，并搭配豐富類型且可擴(kuò)展的組件
• 支持 1 排 N、橫縱排、支持對(duì)象無限嵌套、自定義正則校驗(yàn)、自定義樣式組件、列表拖拽等特性
• 已在阿里云、淘寶、天貓、飛豬、亞博科技、安全智能、新零售行業(yè)工作臺(tái)、人工智能實(shí)驗(yàn)室等多 BU 多場(chǎng)景使用，簡(jiǎn)單使用同時(shí)支持復(fù)雜場(chǎng)景使用
• 使用上有詳細(xì)文檔，維護(hù)上有專人支持

二、form-generator

Element UI表單設(shè)計(jì)及代碼生成器，可將生成的代碼直接運(yùn)行在基于Element的vue項(xiàng)目中；也可導(dǎo)出JSON表單，使用配套的解析器將JSON解析成真實(shí)的表單。

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è)計(jì)器

f-render 是基于 vue-ele-form 開發(fā)的可視化表單設(shè)計(jì)工具, 適用于 各種流程引擎和動(dòng)態(tài)表單項(xiàng)目，大大節(jié)省你的開發(fā)時(shí)間；

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è)計(jì)器

Gitee Star 數(shù) 1938 ， Gitee地址：https://gitee.com/xiaoka2017/easy-flow 演示地址：http://xiaoka2017.gitee.io/easy-flow/#
協(xié)議：

• 符合項(xiàng)目package.json中使用的插件中規(guī)定的協(xié)議即可

功能介紹

• 支持拖拽添加節(jié)點(diǎn)
• 點(diǎn)擊線進(jìn)行設(shè)置條件
• 支持給定數(shù)據(jù)加載流程圖
• 支持畫布拖拽
• 支持連線樣式、錨點(diǎn)、類型自定義覆蓋
• 支持力導(dǎo)圖

免責(zé)聲明：本文內(nèi)容由21ic獲得授權(quán)后發(fā)布，版權(quán)歸原作者所有，本平臺(tái)僅提供信息存儲(chǔ)服務(wù)。文章僅代表作者個(gè)人觀點(diǎn)，不代表本平臺(tái)立場(chǎng)，如有問題，請(qǐng)聯(lián)系我們，謝謝！