form-create 2.5.1 发布，强大的动态表单组件

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

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

文档 | GitHub | 示例

支持 UI

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

2.5.1主要更新了一下内容:

• 新增 parent 和 children 属性
• 新增 sync 配置项, 支持 props 同步
• 修复 page 失效问题
• 修复 control 可能报错问题
• 修复 全局配置 col 无效问题
• 优化 内置组件插槽配置
• 优化 frame, group, sub-form, select 组件功能优化
• 优化 value 同步机制
• 优化 reload 机制
• 优化 validate, validateField 方法
• 优化 表单销毁机制
• 优化 参数注入
• 优化 typescript

安装

根据自己使用的 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))
                }
            }
        }
    }
}

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

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

Vue.component(component.name, component);

formCreate.component(component.name, component);

[
	{
        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'}]
        }
    ]
}

{
    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']
    },
}

{
    type:'rate',
    field: 'star',
    title:'评分',
    value:5,
    control:[
        {
            handle(val){
                return val < 3
            },
            rule:[
                {
                    type:'input',
                    field:'info',
                    title:'差评原因',
                    value:'default info', 
                } 
            ]   
        }                                              
    ]
}

{
	type:'input',
	//...
	validate:[{required:true, type:'string', message:'请个输入内容'}]
}

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'})

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})

type resetBtnProps = ( props:Object) => void

fApi.resetBtnProps({disabled: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 表单验证未通过
}

以上所述就是小编给大家介绍的《form-create 2.5.1 发布，强大的动态表单组件》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！

关注我们，获取更多IT资讯^_^

查看所有标签

• Form 表单组件的设计之路
• [ Laravel 5.7 文档 ] 基础组件 —— 表单验证
• 检查Angular2表单是否在组件内有效
• 支持嵌套对象、多级数组的Vue动态多级表单组件 —— vue-dynamic-form-component
• 表单 – 避免Symfony强制显示表单字段
• 细说 Angular 2+ 的表单（二）：响应式表单

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。