Code前端首页关于Code前端联系我们
首页 前端开发Vue正文

Dynamic Form Builder 2.5 版可帮助您轻松创建表单

terry 2年前 (2023-09-08) 阅读数 134 #Vue

form-create是一个表单生成组件，可以通过JSON生成动态渲染、数据采集、验证和函数提交。它支持3种UI框架，并支持生成任何Vue组件。它内置了20个常用的表单组件和用户组件，即使是复杂的表单也能轻松处理。

文档 | GitHub |示例

支持用户界面

  • 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
  • 优化默认表单提交按钮

安装

根据您使用的用户界面安装对应的版本

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://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/669c5138b25d43e684a4585126f2f97a~tplv-k3u1fbpfcp-zoom-1.imagehttps://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/669c5138b25d43e684a4585126f2f97a~tplv-k3u1fbpfcp-zoom-1.image

类型

  • ​类型：String
  • 使用说明：设置生成零件的名称

场

  • ​类型：String
  • 描述 ：设置字段名称 表单组件 、
    • 自定义组件不可配置

姓名

  • ​类型：String|Object
  • 描述：零件名称

值

  • ​写：any
  • 使用说明：表单组件的字段值，自定义组件无需设置

道具

  • ​参数：Object
  • 说明：设置props
    • 零件

信息

  • ​类型：String|Object
  • 说明：设置组件的快速信息

隐藏

  • ​类型：Bool
  • 使用说明：设置是否渲染组件

前缀

  • ​写：string|Object
  • 说明 ：设置组件
    • 的前缀

后缀

  • ​写：string|Object
  • 说明 ：设置组件后缀

确认

  • 类型：Array
  • 描述：设置表单组件的验证规则

选项

  • 类型：Array
  • 说明 ：设置 select、select、  和其他组件 选项

col

  • 类型：Object
  • 描述：设置组件
    • 的布局规则

控制

  • 类型：Object
  • 描述：控制其他组件显示

儿童

  • 类型：

  • 说明

    • ：设置父组件槽位，默认为default。可与slot配置项一起使用
    • 示例1
    formCreate.maker.create('button').children([
   '按钮内容' 
])
    • 示例2
    maker.input('text','text','text').children([
    maker.create('span').children(['append']).slot('append')
])
    • 示例3
    const status = fApi.hiddenStatus('goods_name')

功能介绍

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

通过表单创建连接

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。组件装订

可以通过控件配置项来实现，通过元件值来检查其他元件是否显示

在线示例

例如，如果评分低于3星，请输入差评原因

{
    type:'rate',
    field: 'star',
    title:'评分',
    value:5,
    control:[
        {
            handle(val){
                return val < 3
            },
            rule:[
                {
                    type:'input',
                    field:'info',
                    title:'差评原因',
                    value:'default info', 
                } 
            ]   
        }                                              
    ]
}
时，显示 rule 中的组件 中的位置 的后代中
参数 使用说明 类型
价值 当文件夹值与 value 相同时，显示 rule 中的文件夹 字符串|数字|布尔
手柄 当方法 handle 返回 true 功能
规则 该组件控制显示的组件 田野
连接 设置rule 中规则添加的位置 绳子
提交 设置预插入规则在 rule绳子
小孩 设置rule是否插入到指定位置的后代中，默认添加到当前规则布尔值

注意！ handle的优先级高于value，所有符合条件的control生效

5。表格验证

可以使用validate配置项设置组件的验证规则，自定义表单组件也支持验证

在线示例

比如需要填写输入文件夹

{
	type:'input',
	//...
	validate:[{required:true, type:'string', message:'请个输入内容'}]
}
参数 描述 类型 默认
列表 枚举类型 绳子 –
长度 字段长度 数字 –
最大 最大长度 数字 –
留言 复印检查 绳子 –
分钟 最小长度 数字 –
图案 正则表达式验证 注册Exp –
必填 必填 布尔值 false
变形 验证前转换字段值 函数（值）=>转换后的值：任意 –
类型 内置认证类型，可选 绳子 ‘绳子’
验证者 个人验证 函数（规则、值、回调） –
空间 为必填项，如果空格将被视为错误 布尔值 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) 设置提交按钮，进入加载状态
    • fApi.btn.disabled(true) 设置提交按钮的禁用状态
    • fApi.btn.show(true) 设置提交按钮的显示状态

编辑重置按钮 

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

  • 快速服务：

    • fApi.resetBtn.loading(true) 设置复位按钮，进入加载状态
    • 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 表单验证未通过
})

版权声明

本文仅代表作者观点，不代表Code前端网立场。
本文系作者Code前端网发表，如需转载，请注明页面地址。

上一篇：2020更新，Vue模拟探探抽卡效果 下一篇：Vue面试知识点（三）
相关文章

发表评论:

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

terry

terry

作者文章
浏览更多
热门
最新文章
标签列表
Copyright by code前端网 All Rights Reserved.粤ICP备12067512号-4

Powered By Z-BlogPHP Theme By 编程老白