前提條件
本文需要操作使用案頭版開發工具,詳情請參見開發工具使用說明中的案頭版開發工具使用說明。
背景資訊
本文檔適用使用者在開發自訂群組件的時候,為了使得自訂群組件能同樣使用DataV中藍圖編輯器的功能,需要使用與藍圖編輯器一致的規則開發自訂群組件。在使用開發人員工具建立完成組件後,本地的組件包檔案夾下會產生index.js檔案和package.json檔案,本文需要在這兩個檔案中修改內容來操作實現。
事件觸發
在自訂群組件中實現藍圖編輯器中事件觸發功能,以數字翻牌器組件的當前值變化事件為例。
在使用開發人員工具建立完成組件後,開啟
package.json檔案。在
package.json檔案中搜尋datav欄位下的events欄位。重要每一個藍圖編輯器中的事件必須要和自訂群組件中
events欄位中定義的事件保持一致,否則編輯器無法識別。在當前events欄位中定義事件,自訂修改
event-name事件名下的描述和value欄位名下的描述。
說明事件名和欄位名都可自訂多個,自訂設定越多,藍圖編輯器節點頁面顯示事件越多。
開啟
index.js檔案,設定代碼中的emit的事件名。this.emit('event-name', obj);說明emit中的事件名要和
package.json檔案中的事件名保持一致,傳遞參數必須是object類型,可以傳遞多個欄位。
匯入資料介面
在自訂群組件中實現藍圖編輯器中匯入資料介面動作,以數字翻牌器組件的匯入資料介面動作為例。
在使用開發人員工具建立完成組件後,開啟
index.js檔案。在
index.js檔案中搜尋datav欄位下的render欄位。在當前
render欄位中自訂設定匯入資料介面動作代碼邏輯。
說明動作邏輯都可自訂多個,自訂設定越多,藍圖編輯器節點頁面顯示動作越多。
添加互動動作
在自訂群組件中實現藍圖編輯器中多個互動動作,以數字翻牌器組件的顯示和隱藏動作為例。
在使用開發人員工具建立完成組件後,開啟
package.json檔案。在
package.json檔案中搜尋datav欄位下的publicHandler欄位。在當前
publicHandler欄位中自訂設定顯示和隱藏的描述,但是需要與index.js檔案中的方法名保持一致。
說明動作邏輯都可自訂多個,自訂設定越多,藍圖編輯器節點頁面顯示動作越多。
開啟
index.js檔案,設定代碼中的container的內容。
說明container中的欄位名要和package.json檔案中的欄位名保持一致。this.container.show(); //顯示代碼,開發人員自訂 this.container.hide(); //隱藏代碼,開發人員自訂