xaboy form-createJS 表单生成器
form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。并且支持生成任何 Vue 组件。结合内置17种常用表单组件和自定义组件,再复杂的表单都可以轻松搞定。
功能
-
支持3种 UI 框架
-
自定义组件
- 可生成任何Vue组件
- 自带数据验证
- 可快速扩展
- 轻松转换为表单组件
-
通过 JSON 生成表单
-
通过 Maker 生成表单
-
全局配置
- 可以设置表单配置
- 可以设置指定组件全局配置
- 可以设置所有组件公共的全局配置
-
强大的API,可快速操作表单
-
双向数据绑定
-
事件扩展
-
局部更新
-
数据验证
-
栅格布局
-
嵌套对象,组件数组
-
内置组件
- hidden
- input
- inputNumber
- checkbox
- radio
- switch
- select
- autoComplete
- cascader
- colorPicker
- datePicker
- timePicker
- rate
- slider
- upload
- tree
- frame
- group
预览
包说明
包名 | 说明 |
---|---|
@form-create/iview | iview 版本 |
@form-create/iview4 | iView V4 版本 |
@form-create/element-ui | ElementUI 版本 |
@form-create/ant-design-vue | Ant-design-vue 版本 |
安装
iview 2.x|3.x
npm install @form-create/iview
iview 4.x
npm install @form-create/iview4
elementUI
npm install @form-create/element-ui
ant-design-vue
npm install @form-create/ant-design-vue
引入
CDN:
iview
<!-- import Vue.js --> <script src="//vuejs.org/js/vue.min.js"></script> <!-- import stylesheet --> <link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css"> <!-- import iView --> <script src="//unpkg.com/iview/dist/iview.min.js"></script> <!-- import form-create/iview --> <script src="//unpkg.com/@form-create/iview/dist/form-create.min.js"></script>
elementUI
<!-- import Vue.js --> <script src="//vuejs.org/js/vue.min.js"></script> <!-- import stylesheet --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- import element --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <!-- import form-create/element --> <script src="//unpkg.com/@form-create/element-ui/dist/form-create.min.js"></script>
ant-design-vue
<!-- import Vue.js --> <script src="//vuejs.org/js/vue.min.js"></script> <!-- import stylesheet --> <link href="https://unpkg.com/ant-design-vue@1.5.3/dist/antd.min.css" rel="stylesheet"> <!-- import moment --> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/zh-cn.js"></script> <!-- import ant-design-vue --> <script defer src="https://unpkg.com/ant-design-vue@1.5.3/dist/antd.js"></script> <!-- import form-create --> <script src="//unpkg.com/@form-create/ant-design-vue/dist/form-create.min.js"></script>
NodeJs:
iview
import formCreate from '@form-create/iview' Vue.use(formCreate)
ElementUI
import formCreate from '@form-create/element-ui' Vue.use(formCreate)
ant-design-vue
import formCreate from '@form-create/ant-design-vue' Vue.use(formCreate)
评论
form-builderPHP 表单生成器
form-builderFormBuilder是一个开源的php表单生成插件,可以快速生成现代化的form表单。还可以配合开源项目 xaboy/form-create 生成任何Vue组件FormBui
form-builderPHP 表单生成器
0
Supler表单生成器
Supler可以帮你轻松实现用代码生成复杂的表单,包括JavaScript实现的客户端组件和Scala实现的服务器端组件。在线演示:https://supler.softwaremill.com/si
Supler表单生成器
0
SQLScreens数据库表单生成器
SQLScreens是一个使用Tcl/TK编写的简单关系型数据库表单生成工具。可让你快速创建查询界面,并指定相应的表和字段。支持多种数据库,包括:MySQL,SQLite,andINFORMIX,an
SQLScreens数据库表单生成器
0
form-generator-antdv表单设计及代码生成器
FormGeneratorAntdv,由form-generator搬运而来。form-generator是一个优秀的ElementUI表单设计及代码生成器,此项目将其改为AntDesignVue。目
form-generator-antdv表单设计及代码生成器
0
form-generator-antdv表单设计及代码生成器
Form Generator Antdv,由form-generator搬运而来。form-gene
form-generator-antdv表单设计及代码生成器
0