热门搜索:
您现在的位置是：首页 > 文章详情

动态表单 form-create 2.5 版本来啦，帮你轻松搞定表单

日期：2021-02-19点击：1087

form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持3个UI框架，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。

文档 | GitHub | 示例

支持 UI

  • element-ui
  • iview/view-design
  • ant-design-vue

新增功能

2.5版本主要更新了一下功能:

  • 重构内部核心代码
  • 优化内部渲染机制
  • 优化内部生命周期事件
  • 重构 TypeScript
  • 新增 nextTick方法,设置渲染后的回调
  • 新增 支持分页加载组件,加速首屏渲染
  • 新增 自定义配置项effect
  • 新增 支持修改type
  • 新增 control支持配置规则插入位置
  • 优化 control符合条件的都会生效,之前版本只能生效第一个
  • 新增 支持给组件配置前缀后缀 prefix, suffix
  • 新增 update配置,value发送变化后触发
  • 新增 支持 wrap 配置项,配置FormItem
  • 新增 object 组件
  • 新增 支持自定义title,info组件
  • 新增 富文本组件wangEditor
  • 新增 原生事件支持事件注入
  • 支持 value.sync 获取双向绑定的 formData
  • 优化 默认的表单提交按钮

安装

根据自己使用的 UI 安装对应的版本

element-ui 版本

 npm i @form-create/element-ui

iview@2.x|3.x 版本

 npm i @form-create/iview

iview/view-design@4.x 版本

 npm i @form-create/iview4

ant-design-vue@1.5+ 版本

 npm i @form-create/ant-design-vue

快速上手

本文以element-ui为例

  1. 在 main.js 中写入以下内容：
 import Vue from 'vue' import ELEMENT from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import formCreate from '@form-create/element-ui' Vue.use(ELEMENT) Vue.use(formCreate)
  1. 生成表单

在线示例

 <template> <div id="app1"> <form-create v-model="fApi" :rule="rule" :option="option" :value.sync="value"></form-create> </div> </template>
 export default { data() { return { //实例对象 fApi: {}, //表单数据 value: {}, //表单生成规则 rule: [ { type: 'input', field: 'goods_name', title: '商品名称' }, { type: 'datePicker', field: 'created_at', title: '创建时间' } ], //组件参数配置 option: { //表单提交事件 onSubmit: function (formData) { alert(JSON.stringify(formData)) } } } } }

规则介绍

https://oscimg.oschina.net/oscnet/up-621b6c6bd380a2a7abc9e8dcded63f44c13.png

type

  • ​类型: String
  • 说明: 设置生成组件的名称

field

  • ​类型: String
  • 说明: 设置表单组件的字段名称,自定义组件可以不配置

title

  • ​类型: String|Object
  • 说明: 组件的名称

value

  • ​类型: any
  • 说明: 表单组件的字段值,自定义组件可以不用设置

props

  • ​参数: Object
  • 说明: 设置组件的props

info

  • ​类型: String|Object
  • 说明: 设置组件的提示信息

hidden

  • ​类型: Bool
  • 说明: 设置组件是否渲染

prefix

  • ​类型: string|Object
  • 说明: 设置组件的前缀

suffix

  • ​类型: string|Object
  • 说明: 设置组件的后缀

validate

  • 类型: Array
  • 说明: 设置表单组件的验证规则

options

  • 类型: Array
  • 说明: 设置radio,select,checkbox等组件option选择项

col

  • 类型: Object
  • 说明: 设置组件的布局规则

control

  • 类型: Object
  • 说明: 控制其他组件显示

children

  • 类型: Array<rule|string|maker>

  • 说明: 设置父级组件的插槽,默认为default.可配合 slot 配置项使用

    • 示例1
     formCreate.maker.create('button').children([ '按钮内容' ])
    • 示例2
     maker.input('text','text','text').children([ maker.create('span').children(['append']).slot('append') ])
    • 示例3
     formCreate.maker.create('i-row').children([ formCreate.maker.create('i-col').props('span',12).children([ formCreate.maker.template('<span>自定义组件</span>',() => new Vue) ]), ])

功能介绍

1. 自定义组件

form-create 支持的在表单内部生成任何 vue 组件

在线示例

例如生成一个el-button组件:

 { //type 可以是内置组件名称,也可以是vue组件名称或者 html 标签 type: 'el-button', //... children: ['按钮内容'] }

生成一个 html 标签

 { //type 可以是内置组件名称,也可以是vue组件名称或者 html 标签 type: 'span', //... children: ['span内容'] }

注意! 生成的组件必须挂载到全局或者通过 form-create 挂载

通过 Vue 挂载

 Vue.component(component.name, component);

通过 form-create 挂载

 formCreate.component(component.name, component);

2. 自定义布局

通过设置配置项col或者栅格组件可以实现对组件的布局

在线示例

通过配置项col设置组件布局,设置一行显示两个组件

 [ { type:'input', field:'input1', title:'input1', col:{span:12} },{ type:'input', field:'input2', title:'input2', col:{span:12} }, ]

通过栅格组件设置一行显示三个组件

 { type:'el-row', children: [ { type:'el-col', props:{ span:8 }, children: [{type:'input',field:'input1',title:'input1'}] }, { type:'el-col', props:{ span:8 }, children: [{type:'input',field:'input1',title:'input1'}] }, { type:'el-col', props:{ span:8 }, children: [{type:'input',field:'input1',title:'input1'}] } ] }

3. 组件前后缀

通过生成规则的prefix属性配置组件的前缀,suffix属性配置组件的后缀

在线示例

 { type:'input', field:'text', title:'text', prefix:'prefix', suffix:'suffix', }

设置前后缀为自定义组件

 { type:'input', field:'text', title:'text', value:'default', prefix:{ type:'ElButton', children:['prefix'] }, suffix:{ type:'ElButton', children:['suffix'] }, }

4.组件联动

可以通过control配置项实现通过组件的值控制其他组件是否显示

在线示例

例如当评价小于3星时输入差评原因

 { type:'rate', field: 'star', title:'评分', value:5, control:[ { handle(val){ return val < 3 }, rule:[ { type:'input', field:'info', title:'差评原因', value:'default info', } ] } ] }
参数 说明 类型
value 当组件的值和value全等时显示rule中的组件 string|Number|Bool
handle 当handle方法返回true时显示rule中的组件 Function
rule 该组件控制显示的组件 Array
append 设置rule中的规则追加的位置 string
prepend 设置rule中的规则前置插入的位置 string
child 设置rule是否插入到指定位置的children中,默认添加到当前规则的 children 中 Boolean

注意! handle优先级大于value,所有符合条件的control都会生效

5. 表单验证

可以通过 validate 配置项设置组件的验证规则,自定义的表单组件也支持校验

在线示例

例如设置input 组件必填

 { type:'input', //... validate:[{required:true, type:'string', message:'请个输入内容'}] }
参数 说明 类型 默认值
enum 枚举类型 string -
len 字段长度 number -
max 最大长度 number -
message 校验文案 string -
min 最小长度 number -
pattern 正则表达式校验 RegExp -
required 是否必选 boolean false
transform 校验前转换字段值 function(value) => transformedValue:any -
type 内建校验类型，可选项 string 'string'
validator 自定义校验 function(rule, value, callback) -
whitespace 必选时，空格是否会被视为错误 boolean false

注意!type需要根据组件的value类型定

APi 介绍

下列是常用的方法

完整的Api介绍

设置表单值

覆盖方式,未定义的字段会设置为 null

 type coverValue = (formData:{[field:string]:any}) => void
  • 用法：
 fApi.coverValue({goods_name:'HuaWei'})

合并方式,未定义的字段不做修改

 interface setValue { (formData:{[field:string]:any}): void (field:string, value:any): void }
  • 用法：
 fApi.setValue({goods_name:'HuaWei'})

别名方法changeValue, changeField

隐藏字段

 interface hidden { //隐藏全部组件 (status:Boolean):void //隐藏指定组件 (status:Boolean, field:string):void //隐藏部分组件 (status:Boolean, field:string[]):void }
  • 用法：
 fApi.hidden(true, 'goods_name')

获取组件隐藏状态

 type hiddenStatus = (field:string)=>Boolean
  • 用法：
 const status = fApi.hiddenStatus('goods_name')

获取规则

 interface getRule { (field:string):Rule (field:string, origin: true): FormRule }
  • 用法：
 const rule = fApi.getRule('goods_name')

插入规则

前置插入

 interface prepend { //插入到第一个 (rule:FormRule):void //插入指定字段前面 (rule:FormRule, field:string):void //插入到指定字段 children 中 (rule:FormRule, field:string, child:true):void }
  • 用法：
 fApi.prepend({ type:"input", title:"商品简介", field:"goods_info", value:"", props: { "type": "text", "placeholder": "请输入商品简介", }, validate:[ { required: true, message: '请输入商品简介', trigger: 'blur' }, ], }, 'goods-name')

后置追加

 interface append { //插入到最后一个 (rule:FormRule):void //插入指定字段后面 (rule:FormRule, field:string):void //插入到指定字段 children 中 (rule:FormRule, field:string, child:true):void }
  • 用法：
 fApi.append({ type:"input", title:"商品简介", field:"goods_info", value:"", props: { "type": "text", "placeholder": "请输入商品简介", }, validate:[ { required: true, message: '请输入商品简介', trigger: 'blur' }, ], }, 'goods-name')

删除指定规则

 type removeRule = (rule:FormRule) => FormRule
  • 用法：
 const rule = {type:'input', /** ... **/} fApi.removeRule(rule)

验证表单

 type validate = (callback:(...args:any[]) => void)=> void
  • 用法：
 fApi.validate((valid, fail) => { if(valid){ //todo 表单验证通过 }else{ //todo 表单验证未通过 } })

验证指定字段

 type validateField = (field, callback:(...args:any[]) => void)=> void
  • 用法：
 fApi.validateField('goods_name', (valid, fail) => { if(valid){ //todo 字段验证通过 }else{ //todo 字段验证未通过 } })

获取表单数据

 interface formData { //获取全部数据 (): {[field:string]:any } //获取部分字段的数据 (field:string[]): {[field:string]:any } }
  • 用法：
 const formData = fApi.formData()

修改提交按钮

 type submitBtnProps = (props:Object) => void
  • 用法：
 fApi.submitBtnProps({disabled:true})

  • 快捷操作:

    • fApi.btn.loading(true) 设置提交按钮进入loading状态
    • fApi.btn.disabled(true) 设置提交按钮禁用状态
    • fApi.btn.show(true) 设置提交按钮显示状态

修改重置按钮

 type resetBtnProps = ( props:Object) => void
  • 用法：
 fApi.resetBtnProps({disabled:true})

  • 快捷操作:

    • fApi.resetBtn.loading(true) 设置重置按钮进入loading状态
    • fApi.resetBtn.disabled(true) 设置重置按钮禁用状态
    • fApi.resetBtn.show(true) 设置重置按钮显示状态

隐藏表单

 type hideForm = (hide:Boolean)=>void
  • 用法：
 fApi.hideForm(true)

提交表单

 type submit = (success: (formData: FormData, $f: fApi) => void, fail: ($f: fApi) => void)=> void
  • 用法：
 fApi.submit((formData, fapi) => { //todo 提交表单 },()=>{ //todo 表单验证未通过 }
原文链接：https://www.oschina.net/news/130381
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有，本站原创内容转载请注明来源。

相关文章

    文章评论

    共有0条评论来说两句吧...

    文章二维码

    扫描即可查看该文章

    点击排行

    推荐阅读

    最新文章