名词解释

meta

meta在 v-formly-v3 中代表的是标准的 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-v3 中即可渲染出表单如下。

姓名

test

启用

<template>
  <div>
    <v-formly-v3 ref="form" v-model="data" :meta="meta"> </v-formly-v3>
    <div class="btns">
      <a-button type="danger" @click="clear"> 重置 </a-button>
      <a-button type="primary" @click="submit"> 提交 </a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, toRaw, unref } from "vue";

const form = ref(null);
const 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"],
};

let data: any = ref({});

function clear() {
  data.value = null;
}

async function submit() {
  let valid = await (form.value as any).validate();
  if (valid) {
    console.log(toRaw(unref(data)));
  }
}
</script>

显示复制复制

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

类 meta （ts class）

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

context

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