教你如何使用vue轻松构建动态表单_vue 动态构建表单-程序员宅基地

技术标签: 动态生成  Vue  vue  前端  vue.js  forms  javascript  

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

[email protected]|3.x 版本

npm i @form-create/iview

iview/[email protected] 版本

npm i @form-create/iview4

[email protected]+ 版本

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

功能介绍

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’ 支持一下 谢谢!

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_40487467/article/details/113826011

智能推荐

资深研发转变为架构师意味着什么_研发经理和架构师-程序员宅基地

文章浏览阅读3k次。架构师 日常工作_研发经理和架构师

Android studio关联svn-程序员宅基地

文章浏览阅读644次。公司内部搭建基于git版本管理的平台Gitlab挂了,为记录下自己版本更迭的代码情况,又不想代码泄露。选择使用早先自己搭建的svn环境,记录下过程,免得后面再度使用时候又遗忘了步骤。kotlin被宣布作为开发Android APP的官方语言已经接近一年,除去开始蹭下热度,稍稍感受下语法变化,未有更进一步的了解。此时,闲来无事,加上近期看到的些项目陆续都有以kotlin作为开发语言的情况,还..._android studio关联svn

mysql 增加操作_MySQL操作初级-程序员宅基地

文章浏览阅读244次。MySQLMySQL 数据库创建数据库create database if not exists user default charset utf8;创建数据库,该命令的作用:如果数据库不存在则创建,存在则不创建。创建user数据库,并设定编码集为utf8删除数据库删库有风险,动手需谨慎drop database user;MySQL 数据表创建MySQL数据表需要以下信息:表名表字段名定义每个表..._增加操作

c++学习日记之使用类来模拟随机漫步_程序地漫步-程序员宅基地

文章浏览阅读1.4k次。本文主要介绍运算符重载和友元的类设计,通过定义一个矢量类来模拟随机漫步。矢量类分两种模式,直角坐标模式和极坐标模式。该函数允许用户选择行走的距离和补偿。该程序用一个变量表示位置,并报告到达指定距离住所需的部署。本文的重点是是理解运算符重载和友元函数代码如下:vector.h文件#ifndef VECTOR_H_#define VECTOR_H_#includenamespac_程序地漫步

TC刷题记_tc 刷题-程序员宅基地

文章浏览阅读323次。先挖个坑,会不断更新。1.SRM658 Div1 850 DancingForever题意:n个男孩和n个女孩,每个男孩喜欢至少一个女孩。你需要给出一种配对方案,满足至少有一对,且每个配对的男孩和他喜欢的女孩配对且他喜欢的其他女孩都被配了对,输出任意一组解。我们考虑直接二分图匹配。对于每个男孩,若你已经找不到增广路,那么肯定已经存在了一组可行解。为什么呢,我们考虑这个男孩找不到增广路,那就说明了他喜_tc 刷题

基础巩固(五)Android通过WebView与Js交互_android webview与js交互-程序员宅基地

文章浏览阅读2.4k次,点赞5次,收藏8次。WebView是一个基于webkit引擎、展现web页面的控件。Android的Webview在低版本和高版本采用了不同的webkit版本内核,4.4后直接使用了Chrome。显示和渲染web界面直接使用html文件(网络上或者本地asset)作为布局可与JavaScript交互调用WebView控件功能强大,除了具有一般View的属性和设置外,还可以对url请求、页面加载、渲染、页面交互进行强大的处理。_android webview与js交互

随便推点

HttpServletRequest 和 HttpServletResponse详解-程序员宅基地

文章浏览阅读465次。用HttpServletRequest,现在整理如下,以便以后查阅请求与响应相关的类和接口非常多,下表是主要的与请求和接口相关的类以及接口。主要的与请求和接口相关的类及接口方 法说 明ServletInputStreamServlet的输入流ServletOutputStreamServlet的输出流ServletRequest代表Servl...

关于Dbeaver的常用操作_dbeaver查看字段注释-程序员宅基地

文章浏览阅读3.6w次,点赞6次,收藏46次。dbeaver是免费和开源(GPL)为开发人员和数据库管理员通用数据库工具。在开发过程中能够极大的提升我们的工作效率,下面我把我日常使用到的功能描述一下:1:与plsql相比,Dbeaver没有右击直接查看表注释的功能,但是Dbeaver提供了一个“打开声明”的功能,里面可以查看一些比较实用的内容:表列注释、创建该表的create语句:2:在一般开发的情况下,往往需要查询的数据条数不会..._dbeaver查看字段注释

新闻资讯CMS内容管理系统的设计与实现(一)_新闻内容管理系统活动图-程序员宅基地

文章浏览阅读2.1w次,点赞27次,收藏175次。新闻资讯CMS内容管理系统的设计与实现(一)目录:1、项目背景:2、项目规划:3、系统结构图:4、系统架构图:5、系统用例图:6、业务流程图:7、E-R图:8、领域模型:9、数据字典:10、DDL建表语句:11、数据流图:1、项目背景:如标题,新闻资讯CMS内容管理系统的设计与实现,主要功能包括浏览新闻、编辑发布、用户管理、评论回复、文章收藏、广告管理、分栏管理等等。后台框架:Spring + S..._新闻内容管理系统活动图

Liunx常用命令(全)_linux中的qq命令-程序员宅基地

文章浏览阅读135次。查看文件find / -name ‘nginx’_linux中的qq命令

Unity 之 Addressable可寻址系统 -- HybridCLR(华佗)+Addressable实现资源脚本全热更 -- 实战(二)_unity addressable hyhridclr-程序员宅基地

文章浏览阅读1.4k次,点赞17次,收藏32次。使用Addressable的热更新资源的机制,结合HybridCLR(华佗)对脚本的封装。实现资源和脚本全部热更新控制。_unity addressable hyhridclr

Pro Andorid3第一章:Android平台简介-程序员宅基地

文章浏览阅读76次。一:通过Android SDK(Software Development Kit,软件开发工具包)将框架提供给程序员Android SDK支持大多数的Java SE(Java Platform, Standard Edition),但不支持AWT和Swing。Android提供了自己经过优化的JVM(java virtual machin,java虚拟机)——Dalvik VM二:D...

推荐文章

热门文章

相关标签