今天继续给小伙伴们分享一款超强大的Vue表单生成器FormCreate。
![b03f10762e7e63e7359b4ddc5bdc6322.png](https://i-blog.csdnimg.cn/blog_migrate/87d4870f96b2be325c6752e1be885ddc.jpeg)
form-create 一款 star高达2.2K+ 可通过JSON生成动态渲染、验证和提交功能的表单生成器。支持生成Vue组件,内置17种常用组件及自定义组件。
![fbd03381d2e1436aa46a4b55fde3d1aa.gif](https://i-blog.csdnimg.cn/blog_migrate/3a36f91f21cba3d8b4cdd03174113d35.gif)
功能特性
- 支持 3种 UI框架
- 双向数据绑定
- 支持使用 JSON 数据生成表单
- 栅格布局
- 内置组件缓存功能,提升渲染速度
- 内置组件生成器,可快速生成组件规则
- 支持自定义生成任何组件,提升表单的灵活性
![ea7d74cf3d9a105d30640205e5cf81c4.png](https://i-blog.csdnimg.cn/blog_migrate/9e43a17b3b3e70a3410a151664d2f4b7.jpeg)
支持
- iViewUI 2.13.0+、iViewUI 3.x、iViewUI 4.x
- ElementUI 2.8.2+
- Ant-design-vue 1.5.3+
安装
// element-ui 版本表单生成器$ npm i @form-create/element-ui -S// iView 2.x|3.x 版本表单生成器$ npm i @form-create/iview -S// iView 4.x 版本表单生成器$ npm i @form-create/iview4 -S// Ant-design-vue 1.5.3+ 版本表单生成器$ npm i @form-create/ant-design-vue -S
引入
// ElementUI方式引入import formCreate, {maker} from '@form-create/element-ui'// iView方式引入import formCreate, {maker} from '@form-create/iview'//或者import formCreate, {maker} from '@form-create/iview4'// AntDesignVue方式引入import formCreate, {maker} from '@form-create/ant-design-vue'
![7c74410b80a6384536908febbe31f787.png](https://i-blog.csdnimg.cn/blog_migrate/a73c3e0762e347d14fbb7969025b66ff.jpeg)
element-ui 预览效果
![24f9215916fb7bd46253c3de5b6a08fa.png](https://i-blog.csdnimg.cn/blog_migrate/1c106383c67a383d9d15e0bacb41f8a4.jpeg)
ant-design-vue 预览效果
使用插件
以iview版本为例介绍如何在项目中使用 form-create。
![9c2f551c41028967358e6ad794fe9275.png](https://i-blog.csdnimg.cn/blog_migrate/cd599e8169998acfc1cfab8993649d9c.jpeg)
![91ead8bb626f511e67b1144d6b5f330b.png](https://i-blog.csdnimg.cn/blog_migrate/3203febf6ce8ebf1c1b6371caaf4a1b2.jpeg)
另外还支持第三方组件 富文本、Markdown编辑器、JSON编辑器及代码编辑器。
非常优秀的一款Vue表单创建器组件,喜欢的朋友千万不要错过哟~~
# 文档地址http://form-create.com/v2/# 仓库地址https://github.com/xaboy/form-create
ok,就介绍到这里。希望对大家有所帮助哈!