
一、概述
頁面是不同的構(gòu)件基于一定的業(yè)務(wù)邏輯和交互形成的。構(gòu)件作為頁面中最基礎(chǔ)的元素,分為原子構(gòu)件、通用構(gòu)件、業(yè)務(wù)構(gòu)件、模板(可復(fù)用的具有一定業(yè)務(wù)邏輯的多個構(gòu)件封裝而成)等。
二、構(gòu)件的添加
構(gòu)件的添加要基于路由,即構(gòu)件的添加的前提是要有一個路由頁面,此處省略添加路由的介紹,具體可參考路由創(chuàng)建。
1.從組件庫添加構(gòu)件
組件庫中涵蓋了平臺中擁有的所有構(gòu)件,通過對組件庫中的構(gòu)件進行模糊搜索,可以查找匹配的構(gòu)件;找到構(gòu)件后,可以通過鼠標拖拽構(gòu)件的方式,將構(gòu)件拖拽到屏幕中間的iframe預(yù)覽區(qū)域,iframe預(yù)覽區(qū)域可以快速接收構(gòu)件信息并渲染效果。
ps: 拖拽構(gòu)件至iframe預(yù)覽區(qū)域,需保持檢查開關(guān)為開啟狀態(tài)。





2.從構(gòu)件樹添加構(gòu)件
從構(gòu)件樹添加構(gòu)件只能通過構(gòu)件Id進行模糊搜索,因此更適合對構(gòu)件id熟悉的用戶。從構(gòu)件樹添加構(gòu)件也更適用于不適合拖拽構(gòu)件的場景,比如要拖拽至某些復(fù)雜的場景中,不便于尋找構(gòu)件擺放位置;或者是添加某些在組件庫中沒有的原子構(gòu)件,如div、a標簽等。
添加通用構(gòu)件:


ps: 父構(gòu)件的插槽位有哪些,可以點擊父構(gòu)件的說明文檔進行查閱,不同的構(gòu)件插槽位名稱不同,位置不同;非容器類構(gòu)件沒有插槽位。

添加原子構(gòu)件:
原子構(gòu)件即原生的HTML元素,如div、a、span等。


至此,構(gòu)件的添加完成啦。






