基于React 的組件可視化自由拖拽頁面生成代碼生成工具(開源)

mobile
pc
code

項(xiàng)目特點(diǎn):

任意拖拽嵌套:通過組件預(yù)覽面板拖拽組件,到設(shè)計(jì)面板實(shí)現(xiàn)任意嵌套,設(shè)計(jì)面板中的組件也可隨意拖拽嵌套

實(shí)時(shí)預(yù)覽:設(shè)計(jì)面板中會(huì)實(shí)時(shí)展示組件的屬性效果和樣式效果,并且與真實(shí)頁面無異

DomTree展示:頁面組件dom樹的展示并實(shí)現(xiàn)dom實(shí)時(shí)追蹤

可視化屬性配置:結(jié)合React 特性和JS語法定制了可視化的組件屬性配置,實(shí)現(xiàn)復(fù)雜數(shù)據(jù)結(jié)構(gòu)的可視化配置

可視化樣式配置:通過樣式配置面板修改樣式,實(shí)時(shí)在頁面中顯示樣式效果

模板功能:可以選中局部或者整個(gè)頁面做為可復(fù)用的模板,提高頁面配置效率減少重復(fù)工作

組件約束:根據(jù)組件特性配置組件約束,減少組件間的錯(cuò)誤嵌套和報(bào)錯(cuò)

預(yù)覽與代碼生成:可隨時(shí)預(yù)覽頁面的真實(shí)效果,和頁面的jsx代碼與樣式代碼

組件庫替換 :通過簡單的配置可以對接任何React組件庫

github地址:https://github.com/anye931123/react-visual-editor

在線預(yù)覽:https://anye931123.gitee.io/react-visual-editor

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 查完寢,整個(gè)人從頭頂?shù)侥_底氣得發(fā)抖。 真不懂現(xiàn)在的年輕人,對人,時(shí)好時(shí)壞,開心時(shí),給你一把糖;煩躁了,索性不開門,...
    爆炸頭的少女閱讀 374評論 2 1
  • 第一天 心情有些焦慮 昨天和她一起做了個(gè)決定,兩年后,她未婚,我未娶,我們就結(jié)婚。 我想把這兩年的每一天都記錄...
    你好再見_a66e閱讀 113評論 0 0
  • 記憶對身體造成了嚴(yán)重的破壞。對昨日快感的回憶讓思想成了身體的主人。身體成了奴隸,智慧被拒絕了。這樣就有了沖突。這個(gè)...
    狗家的貓閱讀 254評論 0 4
  • 從跨年參加趙冰老師說書私房課到線上訓(xùn)練已過21天,已經(jīng)好幾個(gè)老鐵問我“怎么樣?”我說“親測有收獲!” 一、改變思維...
    mlh繆林含閱讀 322評論 0 3
  • 【讀經(jīng)】 耶7 【金句】 你們不要倚靠虛謊的話,說:‘這些是耶和華的殿,是耶和華的殿,是耶和華的殿!’“你們?nèi)魧?shí)在...
    chanor閱讀 132評論 0 0

友情鏈接更多精彩內(nèi)容