全部產品

：區塊編輯器概覽

更新時間：Nov 19, 2024

本文為您介紹區塊編輯器的結構和功能，協助您快速瞭解區塊編輯器開發區塊。

進入到區塊編輯器頁面後，您可以使用系統提供的畫布配置和組件組態工具，實現區塊編輯器的各個功能。

重要

區塊編輯器的整體樣式及功能使用方法，與畫布編輯器保持一致，具體區塊編輯器的功能及組件的使用說明請參見PC端畫布編輯器概覽和圖層管理。

區塊編輯器頁面概覽區塊內組件配置區塊內組件資料來源配置

序號	名稱	說明
1	工具列	工具列位於編輯器頁面的最上方，您可以通過工具列所提供的功能，切換編輯器頁面、控制頁面內模組顯隱、配置區塊設定以及預覽或者發布製作好的區塊。
2	圖層	在圖層列表中，可以看到畫布中各個組件的圖層位置，您可以根據區塊需要，手動調整每個元件圖表層的上下位置關係和圖層組件的縮圖樣式，區塊編輯器中的圖層功能與可視化應用內的畫布編輯器功能基本一致，具體功能詳情請參見圖層管理。
3	組件列表	在組件列表中，可以查看並搜尋各種類型的組件，可以將組件拖動到區塊畫布中進行配置，完成區塊的開發。
4	區塊設定	單擊區塊畫布的空白處，頁面右側會顯示區塊編輯器的基本配置參數。在區塊配置參數處，您可以調整區塊的常用尺寸及區塊大小、設定區塊的背景顏色和圖片、選擇區塊適配縮放方式調整柵格間距。詳情請參見區塊設定。
5	組件配置項	單擊區塊畫布中任意一個組件，區塊編輯器頁面右側會自動彈出組件配置項參數頁面。區塊編輯器內的組件配置項方法和可視化應用中的畫布編輯器配置參數方法一致，具體配置方法請參見配置項說明。
6	組件資料來源	單擊區塊畫布中任意一個組件，區塊編輯器頁面右側會自動彈出組件資料來源配置頁面。區塊編輯器內的組件資料來源支援的類型，包括待用資料源和API兩種類型。在區塊資料來源面板中支援自動更新資料來源內容，且API類型資料支援GET、POST和PUT三種請求方式，資料來源配置面板支援使用資料過濾器，同時支援通過藍圖重新發起請求。

區塊設定

單擊區塊畫布外的空白處，頁面右側會顯示區塊配置項面板。區塊配置面板

名稱	描述
常用尺寸	設定畫布中的區塊常用尺寸類型，可選橫向（適用PC）480×260px、橫向（適用PC）900×260px、縱向布局（適用大屏）260×940px、縱向布局（適用大屏）380×940px、縱向布局（適用大屏）480×940px和自訂尺寸。
區塊大小	設定區塊的寬度和高度值，預設為選擇的橫向（適用PC）480×260px值，單位為px。
背景	調整區塊的背景顏色。
頁面縮放方式	根據區塊展示的尺寸，選擇合適的縮放方式，可選全屏鋪滿、等比縮放寬度鋪滿、等比縮放高度鋪滿、等比縮放高度鋪滿（可滾動）、等比置中鋪滿和不縮放。
載入狀態圖片	設定區塊處於載入狀態時的載入圖片內容，您可以通過輸入載入圖片URL連結上傳；也可單擊圖片框內的更改按鍵或拖拽本地電腦中的一張圖片到框內即可完成圖片的上傳。
柵格間距	柵格間距是組件在區塊頁面中的最小移動單位，組件的邊界會自動吸附到以柵格間距為網格的邊緣上。最小為1px，此時組件的移動為平滑移動。
縮圖	單擊縮圖右側圖框內的點擊截圖按鍵，即可為當前區塊截取一張封面縮圖。