当前位置: 首页 > 工具软件 > Formly > 使用案例 >

v-formly - vue 的动态(JSON 驱动)表单库。

郤旭东
2023-12-01

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,更多内容请查看组件

 类似资料: