本文的灵感来自于我最近在基于 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 组件来处理顶级布局。

就是这样。如果您有任何疑问，请在下面留言。