V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
GavinZhulei
V2EX  ›  程序员

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

  •  
  •   GavinZhulei · 2020-02-04 14:49:25 +08:00 · 8246 次点击
    这是一个创建于 1750 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    2 条回复    2020-05-22 20:36:53 +08:00
    virusdefender
        1
    virusdefender  
       2020-02-04 16:08:32 +08:00
    赞,终于有 vue ant design 了
    cheneydog
        2
    cheneydog  
       2020-05-22 20:36:53 +08:00
    又是只开源半个的噱头
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1748 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 16:44 · PVG 00:44 · LAX 08:44 · JFK 11:44
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.