v-formly - vue 的动态（JSON 驱动）表单库。

v-formly

v-formly 是 vue 的动态（JSON 驱动）表单库。

简洁至上

通过标准JSON Schema & Ajv Validator生成复杂的动态表单及校验，快速、简洁、高效。

可复用性

通过JSON的形式生成表单模板，一份表单简单修改即可多处复用！使您能够快速开发表单页面，相比编写传统的html form表单，使用JSON形式定义表单能够极大的提高了开发效率。

Vue 驱动

目前支持Vue 2.x & Ant Design of Vue v1，Vue 2.x和Vue 3.x的其他UI库（AntDv v3，ElementUI等）支持正在开发中。。。

快速开始

文档 & Demo

v-formly

安装

使用yarn安装v-formly：

yarn add v-formly

或者使用npm安装它：

npm i v-formly --save

使用

import VFormly from "v-formly";

// ...
Vue.use(VFormly);
// ...

一个简单的示例

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

<script>
export default {
  name: "BaseForm",
  data: function () {
    return {
      meta: {
        type: "object",
        properties: {
          name: {
            title: "姓名",
            type: "string",
            default: "kevin",
            ui: {
              showRequired: true,
            },
          },
          desc: {
            title: "描述",
            type: "string",
            default: "Base on technical, but not limited on it!",
            ui: {
              change: (val) => {
                console.log("val = ", val);
              },
            },
          },
          enable: {
            title: "启用",
            type: "boolean",
          },
        },
        required: ["name"],
      },
      data: { enable: true },
    };
  },
  methods: {
    clear() {
      this.data = null;
    },
    async submit() {
      let valid = await this.$refs.form.validate();
      if (valid) {
        console.log(this.data);
      }
    },
  },
};
</script>

针对上述示例我们做以下几点解释：

1. v-formly 支持 v-model 双向绑定，可通过修改 data 来随时改变 form 表单数据；

2. 传入的 schema 是JSON-Schema结构 + 嵌套ui的组合，v-formly 使用 schema 来解析并渲染表单页面；

3. 以上表单包括两个string类型和一个boolean类型的内置component.

   a. 其中name为必填项（required: ["name"]体现出来），且默认内容为“kevin”，其中ui.showRequired为 true 会添加 label 前面的红色星号；

   b. desc非必填，默认内容为“Base on technical, but not limited on it!”，且提供了 change 事件，当输入改变时触发；

   c. enable为一个简单的 AntDv 的Switch组件。

通过上述简单的表单示例，我们大概了解了如何开始使用 v-formly，更多内容请查看组件。