本文的靈感來自於我最近在基於 Vue 的前端上建立動態佈局的實作。

假設您的 API 端點傳回如下所示的 YAML 佈局。

---
row:
  - col: 12
    row:
      - col: 12
        component_id: 1
  - col: 12
    row:
      - col: 6
        component_id: 2
      - col: 6
        row:
          - col: 12
            component_id: 3
          - col: 12
            component_id: 4

我們期望此 YAML 表達式具有如下所示的佈局。

因此，這使得工作變得很容易，我們將解析這個 YAML 結構並產生 JSON 物件。我使用了yaml包。

npm install yaml

然後，我們可以導入它並運行解析器。

import YAML from 'yaml'
const jsonObject = YAML.parse(yaml_struct)

為了完成這項工作，我們需要建立一個遞歸 Vue 範本和一個在遇到巢狀行時可以遞歸呼叫自身的元件。這樣，該結構將動態處理深度嵌套的佈局，就像我提供的那樣。

現在，我們可以在父元件中使用此 RecursiveRow 元件來處理頂級佈局。

就是這樣。如果您有任何疑問，請在下面留言。