DataV：多選下拉框

圖表樣式

多選下拉框是進階控制群組件的一種，可以作為下拉框表單在資料看板中使用，將使用者選擇的資料提交到後端進行處理或者通過互動配置，在其他組件上顯示使用者選擇的內容。

樣式面板

• 搜尋配置：單擊樣式面板右上方的搜尋配置項表徵圖，可在搜尋配置面板中輸入您需要搜尋的配置項名稱，快速定位到該配置項，系統支援模糊比對。詳情請參見搜尋配置項。

• • 尺寸：包括組件的寬度和高度，單位為px。

  • 定位：包括組件的橫座標和縱座標，單位為px。橫座標為組件左上方距離頁面左邊界的像素距離，縱座標為組件左上方距離頁面上邊界的像素距離。

  • 旋轉：以組件的中心為中心點，進行旋轉，單位為度（°）。

    • 手動輸入角度值，控制組件的旋轉角度。

    • 單擊表徵圖，控制組件左右翻轉樣式。

    • 單擊表徵圖，控制組件上下翻轉樣式。

  • 不透明度：取值範圍為0~1。為0時，圖表隱藏；為1時，圖表全部顯示。預設為1。

• 輸入框

  • 預設選中：自訂設定預設選中的條目，輸入框內的內容必須是資料面板中的value欄位中已有的內容，多個欄位內容條目必須用英文逗號,分隔。

  • 功能增強：強化輸入框原有功能，增加以下功能。

    參數	說明
    下拉搜尋	開啟開關， 輸入框可自訂輸入搜尋內容，過濾選出對應下拉式清單內的資料內容；關閉開關，無法使用自訂輸入搜尋內容功能。
    選中清除	開啟開關，輸入框模組會出現清除樣式配置項，可設定清除箭頭的大小、箭頭的顏色、距離右側的邊距和箭頭的背景色；關閉開關，無法使用清除選中配置項中的功能。
    一行顯示	開啟開關，輸入框中的所有內容都在一行顯示；關閉開關，內容可在多行顯示。

  • 邊框樣式：輸入框邊框的樣式。

    參數	說明
    預設	預設邊框下的線粗細、線的可選類型、線顏色和邊框圓角的角度值。
    懸浮	滑鼠懸浮在輸入框邊框時，輸入框邊框的線粗細、線的可選類型、線顏色和邊框圓角的角度值。
    選中	按一下滑鼠輸入框邊框時觸發，輸入框邊框的線顏色值，建議選中顏色設定為透明度0.2的懸浮顏色。

  • 內容樣式：輸入框內容的樣式。

    參數	說明
    文本縮排	輸入框內文本縮排的設定，單位為px。
    背景顏色	輸入框的背景顏色，請參見顏色選取器說明進行修改。
    文本樣式	搜尋時輸入的文本的樣式、提示文本樣式、下拉式清單為空白時，會顯示文本的內容樣式，包括文本的字型樣式、文字粗細、字型大小和顏色。
    提示常值內容	輸入框內為空白時，提示文本的內容。
    標籤配置	背景顏色：輸入框內顯示標籤的背景顏色。 文本：輸入框內標籤文本的文本樣式，包括字型樣式、文字的粗細、字型大小的大小和文本的顏色。 邊框：邊框的粗細、邊框的類型，邊框的顏色和邊框的圓角值。其中邊框的類型包括實線、虛線、點線、雙實線、雕刻效果、浮雕效果、陷入效果和突出效果。 內邊距：標籤內部四個方向的邊距值。 外邊距：標籤距離邊框外部四個方向的邊距值 刪除：刪除表徵圖的大小，刪除表徵圖的顏色和刪除表徵圖距離右側的邊距。

  • 箭頭樣式：輸入框箭頭的樣式，可單擊表徵圖控制箭頭樣式的顯隱。

    參數	說明
    大小	下拉框箭頭的大小。
    顏色	下拉框箭頭的顏色。
    右邊距	下拉框箭頭與組件右邊界的距離，單位px。

• 下拉框

  • 高度：下拉框高度樣式。

    參數	說明
    列表高度	下拉框整體列表高度值，單位px。
    選項高度	下拉框中每個選項的高度，單位px。

  • 背景：下拉框背景顏色。

  • 邊框：下拉框邊框的樣式。

    參數	說明
    粗細	下拉框邊框線的粗細值。
    類型	下拉框邊框線類型樣式，可選實線、虛線、點線、雙實線、雕刻效果、浮雕效果、陷入效果和突出效果。
    顏色	下拉框邊框的顏色。
    圓角	下拉框邊框圓角的大小，單位為px。

  • 文本：下拉框內選項文本的樣式。

    參數	說明
    字型	下拉框內選項文本的字型樣式。
    文字粗細	下拉框內選項文本的字型粗細值。
    字型大小	下拉框內選項文本字型大小大小。
    顏色	下拉框內選項文本的顏色。

  • 邊距：下拉框內選項的內容與選項四周邊框的距離，單位px。

  • 表徵圖配置：下拉框選項文本左側表徵圖的配置樣式，可單擊表徵圖控製圖標配置的顯隱。

    說明

    下拉框選項中的表徵圖配置配置項內容需與資料面板中的imgSrc欄位內容相匹配。組件樣本資料來源面板中預設只配置了第一個資料的表徵圖欄位，如您還需配置其他選項的表徵圖，可自訂配置對應資料項目的imgSrc欄位。

    參數	說明
    寬度	表徵圖的寬度。
    高度	表徵圖的高度。
    距離文字間距	表徵圖與文字之間的距離。

  • 選項懸浮樣式

    參數	說明
    背景	滑鼠懸浮到下拉框內選項時的背景顏色。
    文本	滑鼠懸浮到下拉框內選項時的文本樣式，包括文本的字型樣式、文字粗細、字型大小和顏色。

  • 選項選中樣式

    參數	說明
    背景	滑鼠懸浮到下拉框內選項時的背景顏色。
    文本	滑鼠懸浮到下拉框內選項時的文本樣式，包括文本的字型樣式、文字粗細、字型大小和顏色。
    勾選顏色	勾選條目後，候選框的顏色。

資料來源面板

進階面板

開啟開關，開啟關聯全域變數功能。可通過單擊下拉框選擇項中的內容，觸發資料請求，拋出臨時變數，在其他組件中配置使用。預設拋出資料面板中配置的title、value和imgSrc值，具體配置請參見組件互動配置。

藍圖互動

1. 單擊頁面左上方的表徵圖，進入藍圖頁面。

2. 在圖層節點頁簽下，添加當前組件至主畫布中。

3. 參考藍圖配置參數。

   • 事件

     事件	說明
     當資料介面請求完成時	資料介面請求返回並經過過濾器處理後拋出的事件，同時拋出處理後的JSON格式的資料。具體資料樣本請參見畫布編輯器中組件右側配置面板資料來源頁簽的資料響應結果地區。
     下拉框內容被選中時	當下拉框內容被選中時拋出的事件，同時拋出該值對應的資料項目，參考資料樣本。 [ { "title": "北京", "value": "Beijing", "imgSrc": "https://img.alicdn.com/tfs/TB1jV1lcF67gK0jSZPfXXahhFXa-128-129.png" }, { "title": "上海", "value": "Shanghai" }, { "title": "廣州", "value": "Guangzhou" } ]

   • 動作

     動作	說明
     匯入資料介面	按組件繪製格式處理資料後，匯入組件，重新繪製。不需要重新請求服務端資料，參考資料樣本。 [ { "title": "北京", "value": "Beijing", "imgSrc": "https://img.alicdn.com/tfs/TB1jV1lcF67gK0jSZPfXXahhFXa-128-129.png" } ]
     請求資料介面	重新請求服務端資料，上遊資料處理節點或圖層節點拋出的資料將作為參數。例如多選下拉框配置了API資料來源為https://api.test，傳到請求資料介面動作的資料為{ id: '1'}，則最終請求介面為https://api.test?id=1。
     設定選中的條目	設定當前下拉框中的值，參考資料樣本。 { "value": "Shanghai" }
     清空選中的條目	清空選中下拉框條目的值，不需要參數。
     清空組件到預設值	將組件恢複為預設值，不需要參數。
     移動	將組件移動到指定位置，參考資料樣本。 { // 移動方式。絕對位置：to，相對定位：by。預設值：to。 "positionType": "to", // 指定位置。x座標，y座標。 "attr": { "x": 0, "y": 0 }, // 動畫方式。 "animation": { "enable": false, // 動畫延時。 "animationDuration": 1000, // 動畫曲線。可選值為：linear|easeInOutQuad|easeInOutExpo。 "animationEasing": "linear" } }
     切換顯隱	切換組件顯示或隱藏，不需要參數。
     顯示	顯示組件，參考資料樣本。 { "animationType": "",//動畫方式，可選值：fade，不填無動畫。 "animationDuration": 1000,//動畫延遲，單位ms。 "animationEasing": ""//動畫曲線 }
     隱藏	隱藏組件，參考資料樣本。 { "animationType": "",//動畫方式，可選值：fade，不填無動畫。 "animationDuration": 1000,//動畫延遲，單位ms。 "animationEasing": ""//動畫曲線 }
     更新群組件配置	動態更新組件的樣式配置。需要先在組件的樣式面板中，單擊複製配置到剪貼簿，擷取組件配置資料。再根據需要在藍圖編輯器配置頁面的資料處理節點中更改對應樣式的欄位值。