vue中怎么动态生成form表单

时间 2021-02-16

标签 css html vue git github 正则表达式 typescript npm element-ui api 栏目 HTML 繁體版

原文原文链接

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

文档 | GitHubhtml

支持 UI

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

新增功能

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

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

安装

根据本身使用的 UI 安装对应的版本git

element-ui 版本github

npm i @form-create/element-ui

iview@2.x|3.x 版本正则表达式

npm i @form-create/iview

iview/view-design@4.x 版本typescript

npm i @form-create/iview4

ant-design-vue@1.5+ 版本npm

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

快速上手

本文以element-ui为例element-ui

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

生成表单

在线示例api

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

功能介绍

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 表单验证未经过
})

若是对您有帮助，您能够在GitHub上点 'Star' 支持一下谢谢！