Skip to content

v-formly-v3 是 vue 3 的动态(JSON 驱动)表单库。 JSON powered / Dynamic forms for Vue 3

Notifications You must be signed in to change notification settings

vuermly/v-formly-v3

Repository files navigation

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 antdvCodeSandbox antdv

Stackblitz elementCodeSandbox 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