写在前面
v-formly是vue的动态（JSON驱动）表单库。经过JSON的方式生成表单模板，一份表单简略修改即可多处复用！使您可以快速开发表单页面，相比编写传统的html form表单，运用JSON方式界说表单可以极大的提高了开发效率。目前支撑Vue 2.x & Ant Design of Vue v1。Vue 3的支撑请移步这儿！
支撑的功能
以下列出了v-formly的主要功能点，其他细节请参阅文档。
- 支撑运用JSON界说表单结构；
- 支撑
v-model双向绑定； - 支撑水平、笔直和行内三种布局；
- 支撑Ajv内置的校验以及自界说数据校验（同步校验和异步校验）；
- 支撑自界说表单提交按钮以及内置提交按钮；
- 支撑内置的15+组件以及自界说组件；
- 支撑表单项
visibleIf特点动态设置是否可见； - 支撑获取表单项
context并在运转时设置特点；
一个简略的示例
咱们经过创立一个简略的示例项目来告诉我们怎么运用v-formly。
装置脚手架东西（已装置可忽略）
$ npm install -g @vue/cli
# OR
$ yarn global add @vue/cli
创立一个项目
运用命令行进行初始化。
$ vue create antd-demo
并装备项目。
若装置缓慢报错，可尝试用cnpm或其他镜像源自行装置：rm -rf node_modules && cnpm install。
装置ant-design-vue 1.x
$ npm i --save ant-design-vue@1.7.8
装置v-formly
运用yarn装置yarn add v-formly或许运用npm装置npm i v-formly --save，然后在你的main.js入口文件添加如下内容：
import Vue from 'vue';
import App from './App';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import VFormly from "v-formly";
Vue.config.productionTip = false
Vue.use(Antd);
Vue.use(VFormly);
new Vue({
render: h => h(App),
}).$mount('#app')
运用v-formly创立表单
打开App.vue文件，删除里面的内容，仿制下面的代码进去并保存。
<template>
<div id="app">
<div class="wrapper">
<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>
</div>
</template>
<script>
export default {
name: "App",
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) {
this.$message.success(JSON.stringify(this.data));
}
},
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
margin-top: 60px;
}
.wrapper {
margin: auto;
max-width: 600px;
}
.btns {
display: flex;
justify-content: flex-end;
}
.ant-btn + .ant-btn {
margin-left: 8px;
}
</style>
此刻，你现已完成了一个简略的运用v-formly的项目了，这是运转yarn serve或许npm run serve，浏览器中会看到一个简略的表单如下所示：
针对上述示例咱们做以下几点解释：
-
v-formly 支撑 v-model 双向绑定，可经过修改 data 来随时改动 form 表单数据；
-
传入的
meta是JSON-Schema结构 + 嵌套ui的组合，v-formly 运用 meta 来解析并烘托表单页面； -
以上表单包含两个
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，接下来咱们介绍一下v-formly完成的主要功能点。
支撑运用JSON界说表单结构
v-formly正是运用了JSON来界说表单结构才达到了不必画UI的作用，使你在快速创立完表单之后可以快速编写事务逻辑。举例阐明，咱们的表单需求一个输入框来输入名字，则界说如下meta传入v-formly即可。
{
"type": "object",
"properties": {
"name": {
"title": "名字",
"type": "string",
"default": "kevin",
"ui": {
"showRequired": true
}
}
},
"required": [
"name"
]
}
此刻生成界面如下：
上面的JSON结构界说了label为“名字”的string类型的输入框，并且是必填的，默许内容为“kevin”，其间required为Ajv可识其他内置校验，此刻删除输入框中的内容点击提交，则会校验不经过。ui为v-formly中的自界说节点，非JSON Schema的标准节点，此节点下面几乎同步了ant design vue组件的一切特点，部分不同可参阅组件，showRequired会在label前面添加一个赤色的*号代表必填，无校验逻辑。
此刻假如咱们在ui下面添加一个ant design vue组件的特点prefix如下，
{
"type": "object",
"properties": {
"name": {
"title": "名字",
"type": "string",
"default": "kevin",
"ui": {
"showRequired": true,
"prefix": "$"
}
}
},
"required": [
"name"
]
}
则生成如下页面：
看到了吗，十分简略！
支撑水平、笔直和行内三种布局
v-formly支撑这三种布局，可以很好的满足大部分事务需求，水平和笔直的布局适合创立表单或许编辑表单，行内布局适合列表页查询表单等。
咱们经过传入layout来完成各种布局（layout = horizontal | vertical | inline）。
这个十分直观就不多介绍了，可参阅布局示例。
支撑Ajv内置的校验以及自界说数据校验（同步校验和异步校验）
Ajv内置的校验请参阅特点阐明，这儿分类列出了各种类型的校验特点。
自界说校验咱们支撑同步校验和异步校验。
- 同步校验
如下meta结构中，咱们在ui节点下添加了validator特点，此特点接纳一个函数，参数为当前表单项的值，并回来一个过错音讯数组，数组中的keyword为Ajv的标准关键字，这样咱们就可以知道是什么过错，message为自界说过错音讯（此处，当val不存在时会报错）。
meta: {
type: "object",
properties: {
name: {
title: "名字",
type: "string",
default: "kevin",
ui: {
showRequired: true,
validator: (val) => !val ? [{ keyword: "required", message: "Required name" }] : [],
},
},
},
required: ["name"],
},
- 异步校验
异步校验类似，只不过回来的是一个Promise。
meta: {
type: "object",
properties: {
asyncError: {
title: "异步过错（2秒）",
type: "string",
ui: {
showRequired: true,
validatorAsync: (val) => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(
!val ? [{ keyword: "required", message: "Required asyncError",}] : []
);
}, 2000);
});
},
},
},
},
required: ["asyncError"],
},
如需更多了解，请参阅文档自界说校验。
支撑自界说表单提交按钮以及内置提交按钮
v-formly可以在外部自界说提交按钮，也可以运用v-formly的内置按钮，运用内置按钮则必须完成重置和提交事情。具体内容请参阅表单。
支撑表单项visibleIf特点动态设置是否可见
在表单中会经常呈现当某个表单项的值产生改动时，另一个表单项躲藏或呈现的逻辑，这儿咱们就可以运用visibleIf特点。
{
type: "object",
properties: {
string1: {
title: "字段二是否可见",
type: "string",
ui: {
showRequired: true,
placeholder: "当值为v-formly时字段二可见",
errors: {
required: "请输入",
},
change: (val) => console.log(val),
},
},
string2: {
title: "字段二",
type: "string",
ui: {
showRequired: true,
show: false,
visibleIf: {
"/string1": (context, id, val) => {
return val === "v-formly";
},
},
},
},
},
required: ["string1", "string2"],
}
此事例中，只要第一个输入框的值为“v-formly”的时分，第二个输入框才会呈现。
支撑获取表单项context并在运转时设置特点
v-formly还支撑运转时动态获取context，从而可以动态修改表单项的各种参数特点等。
const context = this.$refs.form.getContext("/multiple");
if (context) {
context.ui.options = ["上", "右", "下", "左"];
context.value = "下";
}
详情请参阅Radio 单选框“设置规格”按钮示例。
最终
好了，到了这儿我们对v-formly都有了一个大约的了解，我们可以自己运用一下v-formly库，也希望我们可以提出名贵的定见和建议，协助我更好维护和优化v-formly！
再一次：github地址在这儿，文档在这儿！觉得对你有协助就给个star吧！
PS: vue 3 & ant design vue 3.x 开发完成第一版！
PS: v-formly的英文文档目前缺失中，假如有爱好可以提PR哦！
