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

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

1. 设计表单

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

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 的表单生成器，其中某些高级组件暂时还未支持（比如图片上传、子表单），更多功能我们将持续完善。

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