名词解释

meta

meta在 v-formly 中代表的是标准的 JSON Schema 和嵌套的ui结合的结构。例如如下结构：

{
  "type": "object",
  "properties": {
    "name": {
      "title": "姓名",
      "type": "string",
      "default": "kevin",
      "ui": {
        "showRequired": true
      }
    },
    "obj": {
      "type": "object",
      "properties": {
        "subObj": {
          "title": "test",
          "type": "string",
          "ui": {
            "showRequired": true
          }
        }
      },
      "required": ["subObj"]
    },
    "enable": {
      "title": "启用",
      "type": "boolean"
    }
  },
  "required": ["name"]
}

这是一个标准的meta格式的数据结构，除了高亮的ui部分，它其实是一个标准的 JSON Schema 结构，我们把它传入 v-formly 中即可渲染出表单如下。

姓名

test

启用

<template>
  <v-formly :meta="meta"> </v-formly>
</template>

<script>
export default {
  name: "BaseForm",
  data: function () {
    return {
      meta: {
        type: "object",
        properties: {
          name: {
            title: "姓名",
            type: "string",
            default: "kevin",
            ui: {
              showRequired: true,
            },
          },
          obj: {
            type: "object",
            properties: {
              subObj: {
                title: "test",
                type: "string",
                ui: {
                  showRequired: true,
                },
              },
            },
            required: ["subObj"],
          },
          enable: {
            title: "启用",
            type: "boolean",
          },
        },
        required: ["name"],
      },
    };
  },
};
</script>

显示代码 复制代码 复制代码

我们称此 JSON 结构为meta，当然此结构中也嵌套了许多子meta，比如name，obj，subObj，enable对应的值都称之为meta。

类 meta （js class）

当我们把meta传入 v-formly 中，接收它的是我们的类 meta，类 meta是一个 JavaScript 的 class 类，它负责保存及处理表单中每个类型的表单项的处理逻辑及数据。

context

类 meta实例化之后就是context，每一个表单项都有一个对应的context。