form-create 是一个可以通过 json 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。并且支持生成任何 vue 组件。结合内置17种常用表单组件和自定义组件,再复杂的表单都可以轻松搞定。
|
自定义组件
通过 json 生成表单
通过 maker 生成表单
强大的api,可快速操作表单
双向数据绑定
事件扩展
局部更新
数据验证
栅格布局
内置组件17种常用表单组件
速度更快
体积更小
更强大的全局配置
自定义组件更容易扩展
更容易支持第三方 ui 库
更少的 bug
通过 json 创建表单
通过 api 操作表单
名称 | 说明 |
---|---|
@form-create/iview | |
@form-create/element-ui | |
@form-create/core | form-create 核心包 |
@form-create/utils | form-create 工具包 |
@form-create/data | 省市区多级联动数据 |
以element-ui版本为例介绍如何在项目中使用 form-create
npm i @form-create/element-ui
全局注册
import formcreate form '@form-create/element-ui'; vue.use(formcreate);
局部挂载
import formcreate form '@form-create/element-ui'; export default { components:{ formcreate:formcreaet.$form() } }
<template> <form-create v-model="$f" :rule="rule" @on-submit="onsubmit"></form-create> </template> export default { data () { return { //表单实例对象 $f:{}, //表单生成规则 rule:[ { type:'input', field:'goods_name', title:'商品名称' }, { type:'datepicker', field:'created_at', title:'创建时间' } ] }; }, methods:{ onsubmit(formdata){ //todo 提交表单 } } };
可以通过 $f 快速操作表单,例如:
$f.hidden
:隐藏指定组件$f.validate
:验证表单$f.setvalue
:修改表单组件的值$f.append
:追加表单组件通过标签生成
{ type:'el-button', name: 'btn', props:{ type:'primary', field:'btn', loading:true }, children:['加载中'] }
通过模板生成
{ type:'template', name:'btn' template:'<el-button :loading="loading">{{text}}<el-button>', vm: new vue({ data:{ loading:true, text:'加载中' } }) }
转换为表单组件
自定义组件转换为表单组件后,可通过$f.formdata
,$f.getvalue
,$f.setvalue
,$f.disabled
等方法快速操作组件,达到和内置组件相同的效果
props
在自定义组件内部通过props
接收一下属性
value
表单的值disabled
组件的禁用状态例如:
vm = vue({ props:{ value:string, disabled:boolean } })
input 事件
通过input
事件更新组件内部的值
当组件值发生变化后,通过 input 事件更新值.例如:
vm.$emit('input',newvalue);
要生成的自定义组件必须通过vue.component
方法挂载到全局,或者通过formcreate.component
方法挂载
例如:
formcreate.component('testcomponent',component);
或者
vue.component('testcomponent',component);
表单组件必须定义field
属性
json
{ type:'testcomponent', value:'test', field:'testfield', title:'自定义组件' }
maker
formcreate.maker.create('testcomponent','testfield','自定义组件').value('test')
自定义计数器按钮组件,获取按钮点击数.该组件的功能和内置组件相同
formcreate.maker.template('<el-button @click="onclick" long :disabled="disabled">计数器-{{num}}</el-button>', new vue({ props:{ //预定义 disabled:boolean, value:number, }, data: function () { return { num: this.value, } }, watch:{ value(n){ this.num = n; } }, methods: { onclick: function () { this.num++; //更新组件内部的值 this.$emit('input',this.num); }, }, }), 'tmp', '自定义 title').value(100).props('disabled',false)
如对本文有疑问, 点击进行留言回复!!
javascript从入门到跑路-----小文的js学习笔记(19)------- js的垃圾回收机制
Agora 开源 | 一个 Demo,帮你快速实现社交直播四大场景
网友评论