介绍
form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。并且支持生成任何 Vue 组件。结合内置17种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。
安装
CDN 引入
目前可以通过 unpkg.com/@form-create/ant-design-vue 获取到最新版本的资源，在页面上引入 js 即可开始使用。
```html
<!-- import Vue.js --><scriptsrc="//vuejs.org/js/vue.min.js"></script><!-- import stylesheet --><linkhref="https://unpkg.com/ant-design-vue@1.5.3/dist/antd.min.css"rel="stylesheet"><!-- import moment --><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/zh-cn.js"></script><!-- import ant-design-vue --><scriptdefersrc="https://unpkg.com/ant-design-vue@1.5.3/dist/antd.js"></script><!-- import form-create --><scriptsrc="//unpkg.com/@form-create/ant-design-vue/dist/form-create.min.js"></script>
```
NPM
安装
推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。
```sh
npm i @form-create/ant-design-vue
```
引入
```js
import formCreate from '@form-create/ant-design-vue'
```
支持
ant-design-vue^1.5.3
功能
- 持支持3种 UI 框架- 支持自定义表单组件- 可生成任何Vue组件- 自带数据验证- 组件插槽设置- 通过 JSON 生成表单- 通过 Maker 生成表单- 强大的API，可快速操作表单- 双向数据绑定- 事件扩展- 事件注入- 局部更新- 数据验证- 栅格布局- 内置组件17种常用表单组件复制代码
生成
```js
<template>
<form-create v-model="fApi" :rule="rule" :option="option"></form-create>
</template>
<script>
data () {
return {
//实例对象 fApi:{},
//表单生成规则 rule:[
{
type:'input',
field:'goods_name',
title:'商品名称' },
{
type:'datePicker',
field:'created_at',
title:'创建时间' }
],
//组件参数配置
option:{
//表单提交事件onSubmit:function (formData) {
alert(JSON.stringify(formData));
}
}
};
}
};
</script>
```
数组组件/组件嵌套
可以通过group组件实现组件数组,嵌套对象功能
```js
export default {
{
type:"group",
title:"标签",
field:" label",
value:[],
props:{
min:1,
max:5,
rule:{
type:'input',
field:'input',
props:{disabled:false},
validate:[{required:true}]
}
},
validate:[
{required:true, type: 'array', min: 1, message: '最少添加1个标签'}
]
}
```
Control
可以通过control配置项实现通过组件的值控制其他组件是否显示
当用户选中包邮选项后会自动显示number组件
```js
{
type:"group",
title:"标签",
field:" label",
value:[],
props:{
min:1,
max:5,
rule:{
type:'input',
field:'input',
props:{disabled:false},
validate:[{required:true}]
}
},
validate:[
{required:true, type: 'array', min: 1, message: '最少添加1个标签'}
]
}
```
网友评论