組件屬性

2022-02-24 15:19 更新

1. 組件屬性簡介

自定義組件支持屬性定義( propTypes )操作,用于對組件進行屬性層面的豐富,增加自定義屬性可定制性的同時使其更加靈活且貼合業(yè)務需求。(如圖所示1.1-1 所示)

圖1.1-1 組件屬性定義入口

組件屬性可以通過「添加一項」按鈕來進行增加,也可通過「編輯」按鈕進行自定義修改,還可通過「刪除」按鈕進行刪減。點擊「編輯」按鈕可以看到組件屬性的所有配置項。(如圖1.1-2 所示)

圖1.1-2 自定義組件屬性定義配置項

所有自定義組件屬性定義都可以在組件預覽界面(簡單類型的屬性調試)或安裝到應用(復雜的屬性配置:包括涉及代碼的調試工作)中進行查看與配置。(如圖1.1-3 所示)

圖1.1-3 組件屬性的預覽調試

各個配置項的詳細說明請參見下文。

1.1 屬性標題

給自定義組件配置的屬性名稱,屬性標題的默認名稱為「屬性標題」,一個簡單易懂的標題有助于使用者更好的理解屬性的含義或識別需要填報的內容。

在頁面使用該組件時,對應的如下圖:

圖1.1-4 組件屬性在表單設計器的效果演示

1.2 屬性名稱

組件的屬性名稱是組件的屬性 Key,類似組里的 props.xxx。默認值為 propName 。可以在頁面設計中進行變量的綁定,從而實現對組件的控制。如自定義組件的屬性值作為自定義組件內某一個組件的標題。(如圖1.1-5 所示)

圖1.1-5 屬性名稱的使用

注意:組件的屬性名稱不可以為空,否則在進行調用或賦值操作時會報錯。

1.3 屬性類型

組件的屬性類型基本類似于常見的數據類型,分別有:文本、布爾、數字、對象、數組、函數、元素七種類型,每個數據類型又對應若干個設置器,以滿足用戶對數據不同維度的處理需求。(如圖1.1-6所示)

圖1.1-6 屬性類型定義

1.4 設置器

不同屬性類型的組件擁有不同的屬性設置器,實現不同的組件渲染及數據處理方式。如文本類型對應五種設置器。(如圖1.1-7 所示)

圖1.1-7 組件的屬性設置器

1.5 默認值

是指當用戶訪問表單時,表單內自定義組件默認顯示的字段。(效果如圖1.1-8 所示)

圖1.1-8 組件屬性默認值

1.6 是否隱藏

控制該屬性是否隱藏,一般情況用不到。

1.7 當變化時

可以用來做多個屬性之間的聯動,一般情況用不到。

1.8 布局

分為塊( block )與行內( inline )兩種,用于設置該自定義組件在頁面內的排列方式。

1.9 幫助說明

  • 暫時用不到。

1.10 幫助連接

  • 暫時用不到。


以上內容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號