可拖拽布局的表单设计器新版发布，支持 Ant Design Vue

基于 Vue, ElementUI 开发的一款表单设计器，目前开源版本在 Github 获得星标 2.4k，在2020年开工之际，我们加入了对 Ant Design Vue 的支持，让使用Ant Design Vue 的项目也能够快速进行表单的开发，废话不多说，接下来我们来看看如何快速开发 Ant Design Vue 表单。

1. 设计表单

在表单设计官网平台上设计好表单，在表单属性 UI 设置选择 Ant Design，预览查看表单。

https://user-gold-cdn.xitu.io/2020/2/4/1700e5f3888a7e8a?w=2874&h=1340&f=png&s=333229

https://user-gold-cdn.xitu.io/2020/2/4/1700e5fe8e52861e?w=1994&h=1196&f=png&s=104051

2. 安装表单设计器

该功能目前在高级版本中提供，详细安装方法请参考官方文档。

如果需要试用版本请联系我们。

3. 引入 antd 表单生成器

import {
  GenerateAntdForm,
} from '<%=your local path%>/form-making-advanced'
import '<%=your local path%>/form-making-advanced/dist/FormMaking.css'

Vue.component(GenerateAntdForm.name, GenerateAntdForm)
/* 或写为
 * Vue.use(GenerateAntdForm)
 */

4. 开始使用

<fm-generate-antd-form 
  :data="jsonData" 
  ref="generateForm"
>
</fm-generate-antd-form>

点击设计器中生成JSON，将生成的JSON 数据赋值给 jsonData 即可完成渲染。

5. 其他说明

设计器还是采用的 element，只是添加了 antd 的表单生成器，其中某些高级组件暂时还未支持（比如图片上传、子表单），更多功能我们将持续完善。

如果您在使用过程中有疑问的话，欢迎联系我们。