v-formly-v3

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

简洁至上

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

可复用性

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

Vue 驱动

目前支持Vue 3.x，组件库支持antdv v3 & element-plus，Vue 3.x的其他UI库（DevUI等）支持正在开发中。。。

快速开始

文档 & Demo

简介

文档

Stackblitz antdv， CodeSandbox antdv

Stackblitz element， CodeSandbox element

安装

推荐使用 vite cli 搭建项目

搭建完成后:

使用yarn安装v-formly-v3：

yarn add v-formly-v3

或者使用npm安装它：

npm i v-formly-v3 --save

使用

基于 antdv v3 组件库

import { createApp } from "vue";
import App from "./App.vue";
import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.css";
import * as antIcons from "@ant-design/icons-vue";
import VFormly from "v-formly-v3/antdv";

const app = createApp(App);
app.use(Antd);
Object.keys(antIcons).forEach((key) => {
  app.component(key, (antIcons as any)[key]);
});
app.config.globalProperties.$antIcons = antIcons;

app.use(VFormly, {
  ui: {
    errors: {
      required: "必填项",
    },
  },
});
app.mount("#app");

基于 element-plus 组件库

import { createApp } from "vue";
import App from "./App.vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import * as elIcons from "@element-plus/icons-vue";
import VFormly from "v-formly-v3/element";

const app = createApp(App);
app.use(ElementPlus);
for (const [key, component] of Object.entries(elIcons)) {
  app.component(key, component);
}
app.config.globalProperties.$elIcons = elIcons;

app.use(VFormly, {
  lib: "element",
  ui: {
    errors: {
      required: "必填项",
    },
  },
});
app.mount("#app");

其他

不论是学习还是使用 v-formly-v3，有任何问题可以添加 QQ 群：610930944，我们为你解答关于使用 v-formly-v3 过程中的的任何疑难杂症！

MIT Licensed | Copyright © 2022-present v-formly-v3