全部產品
Search
文件中心

DataV:自訂開發組件藍圖說明

更新時間:Mar 28, 2026

前提條件

本文需要操作使用案頭版開發工具,詳情請參見開發工具使用說明中的案頭版開發工具使用說明

背景資訊

本文檔適用使用者在開發自訂群組件的時候,為了使得自訂群組件能同樣使用DataV中藍圖編輯器的功能,需要使用與藍圖編輯器一致的規則開發自訂群組件。在使用開發人員工具建立完成組件後,本地的組件包檔案夾下會產生index.js檔案和package.json檔案,本文需要在這兩個檔案中修改內容來操作實現。

事件觸發

在自訂群組件中實現藍圖編輯器中事件觸發功能,以數字翻牌器組件的當前值變化事件為例。image.png

  1. 在使用開發人員工具建立完成組件後,開啟package.json檔案。

  2. package.json檔案中搜尋datav欄位下的events欄位。

    重要

    每一個藍圖編輯器中的事件必須要和自訂群組件中events欄位中定義的事件保持一致,否則編輯器無法識別。

  3. 在當前events欄位中定義事件,自訂修改event-name事件名下的描述和value欄位名下的描述。事件觸發檔案內容修改

    說明

    事件名和欄位名都可自訂多個,自訂設定越多,藍圖編輯器節點頁面顯示事件越多。

  4. 開啟index.js檔案,設定代碼中的emit的事件名。

    this.emit('event-name', obj); 
    說明

    emit中的事件名要和package.json檔案中的事件名保持一致,傳遞參數必須是object類型,可以傳遞多個欄位。

匯入資料介面

在自訂群組件中實現藍圖編輯器中匯入資料介面動作,以數字翻牌器組件的匯入資料介面動作為例。image.png

  1. 在使用開發人員工具建立完成組件後,開啟index.js檔案。

  2. index.js檔案中搜尋datav欄位下的render欄位。

  3. 在當前render欄位中自訂設定匯入資料介面動作代碼邏輯。匯入資料介面代碼邏輯

    說明

    動作邏輯都可自訂多個,自訂設定越多,藍圖編輯器節點頁面顯示動作越多。

添加互動動作

在自訂群組件中實現藍圖編輯器中多個互動動作,以數字翻牌器組件的顯示隱藏動作為例。image.png

  1. 在使用開發人員工具建立完成組件後,開啟package.json檔案。

  2. package.json檔案中搜尋datav欄位下的publicHandler欄位。

  3. 在當前publicHandler欄位中自訂設定顯示隱藏的描述,但是需要與index.js檔案中的方法名保持一致。 隱藏顯示動作自訂

    說明

    動作邏輯都可自訂多個,自訂設定越多,藍圖編輯器節點頁面顯示動作越多。

  4. 開啟index.js檔案,設定代碼中的container的內容。顯示隱藏動作欄位名

    說明

    container中的欄位名要和package.json檔案中的欄位名保持一致。

    this.container.show(); //顯示代碼,開發人員自訂
    this.container.hide(); //隱藏代碼,開發人員自訂