vuejs表单绑定（基于Vue.js表单创建器FormCreate）
vuejs表单绑定（基于Vue.js表单创建器FormCreate）# 文档地址 http://form-create.com/v2/ # 仓库地址 https://github.com/xaboy/form-createok，就介绍到这里。希望对大家有所帮助哈！以iview版本为例介绍如何在项目中使用 form-create。<template> <div id="app"> <form-create v-model="fApi" :rule="rule" :option="option"></form-create> </div> </template> <script> export default { data () { return { //实例对象
今天继续给小伙伴们分享一款超强大的Vue表单生成器FormCreate。
form-create 一款 star高达2.2K 可通过JSON生成动态渲染、验证和提交功能的表单生成器。支持生成Vue组件，内置17种常用组件及自定义组件。
- 支持 3种 UI框架
- 双向数据绑定
- 支持使用 JSON 数据生成表单
- 栅格布局
- 内置组件缓存功能，提升渲染速度
- 内置组件生成器，可快速生成组件规则
- 支持自定义生成任何组件，提升表单的灵活性
- 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'
element-ui 预览效果
ant-design-vue 预览效果
使用插件以iview版本为例介绍如何在项目中使用 form-create。
<template>
<div id="app">
<form-create v-model="fApi" :rule="rule" :option="option"></form-create>
</div>
</template>
<script>
export default {
data () {
return {
//实例对象
fApi:{}
//表单生成规则
rule:[
{
type:'input'
field:'goods_name'
title:'商品名称'
}
{
type:'datePicker'
field:'created_at'
title:'创建时间'
}
]
//组件参数配置
option:{
//表单提交事件
onSubmit:function (formData) {
alert(JSON.stringify(formData));
}
}
};
}
};
</script>
另外还支持第三方组件 富文本、Markdown编辑器、JSON编辑器及代码编辑器。
非常优秀的一款Vue表单创建器组件，喜欢的朋友千万不要错过哟~~
# 文档地址
http://form-create.com/v2/
# 仓库地址
https://github.com/xaboy/form-create
ok，就介绍到这里。希望对大家有所帮助哈！
