leecho / jvue

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Vue后台管理快速成型工具

Vue表单设计器

特色

  • 支持ElementUI组件库,未来计划添加更多组件库支持
  • 支持多达37种控件(按需会持续添加),满足各种业务场景
  • 支持子表单控件,可实现以下三种数据格式
model: {
    obj: {},        // 对象表单
    arr: [],        // 数组表单
    objArr: [{}]    // 对象数组表单
}
  • 组件配置详细,基本1:1还原了对应组件库组件的所有配置,当然,为了界面简洁不常用的配置我们放在了高级设置里
  • 支持生成JSON逆向渲染出表单(需安装@jvue/jform 国内(gitee)
    • 格式遵循vue render结构,使用render函数解析JSON顺滑自然
    • 支持特殊语法透传属性、事件、插槽给渲染器内部控件,这可以使JSON模式灵活度丝毫不亚于直接生成vue代码,而且我们还在相关事件、作用域插槽的参数之中,提供了如当前表单实例、表单model等变量方便开发
  • 支持直接生成vue代码,不想使用JSON模式的可以选择这种方式,简单粗暴,生成的vue代码无需任何依赖直接copy至你的项目中即可运行
  • 支持复杂的表单校验规则
  • 支持通过导入sql建表语句快速生成表单模板,向后端的小伙伴要来建表语句导入生成后,只需要稍微调整下即可使用,方便快捷
  • 控件之间的组合非常灵活,表单设计器灵活度越高,遇到需求时越不容易捉襟见肘

Links

FAQ

  1. 表单设计器适用人群?

    • 千变一律的表单代码写吐了,想通过技术手段生成代码然后稍微改改即可使用的各位大佬
    • 后端兼职写前端,对vue不是太熟悉或对组件库属性记不太清楚的后端程序员
    • 刚入行的新人,抱着学习的心态,把生成的代码作为学习参考
  2. 如何集成到自己的项目中?

    • 使用iframe技术
    • 尝试下访问 集成地址
    • 其实就是在表单设计器的地址后面加上 ?fullScreen=2 参数即可实现无边化全屏
  3. 如何给作者提建议&需求?

    • 给我们提Issues 国内(gitee)
    • 通过Vue表单设计器在线地址右上角的联系我们功能
    • 加入我们的技术讨论群

技术讨论群

使用QQ App扫描二维码加入我们一起讨论

QQ群: 699850713

开发计划

  • v1.0.1
    1. 新增 新建 功能,实现以数据的角度创建表单
    2. 新增 导入建表Sql 功能,用于快速生成表单模板
  • v1.0.2
    1. 支持 撤销重做 功能
  • v1.0.3
    1. 生成代码功能支持生成简化版代码,与组件库组件props默认值一致的属性不生成在代码中,当然这是可选的
    2. 导入建表sql后,支持一键将所有控件调整为 描述 控件且取消所有校验规则,主要用于快速生成 详情 表单
    3. 支持一键清除所有控件表单校验规则
    4. 插槽控件 数据格式 配置支持不设置(默认),如果不设置则不会在表单 model 中生成对应属性
    5. 生成代码页面支持一键复制代码
  • v2.0.0 v1.0.4 本来预计更新 1、2 条,但是改着改着发现了很多问题,重构了很多代码,为了提供优质的体验,我们决定直接推出2.0版本,对应Vue2,算是本项目正式推出,文档、官网会同步上线,这可能会花费一些时间准备,不过请放心,我们没有弃坑。
    1. 正式推出JSON动态渲染模式,文档上线
    2. 新增 面板分割 控件,属于布局控件
    3. 其它还有好多等2.0正式上线可以到 更新日志 中查看

About

License:MIT License


Languages

Language:CSS 67.5%Language:JavaScript 16.8%Language:Vue 13.7%Language:HTML 2.1%