技术标签: 动态生成 Vue vue 前端 vue.js forms javascript
form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的动态表单组件。支持3个UI框架,并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件,再复杂的表单都可以轻松搞定。
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
npm i @form-create/ant-design-vue
本文以
element-ui
为例
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)
<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))
}
}
}
}
}
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);
通过设置配置项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'}]
}
]
}
通过生成规则的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']
},
}
可以通过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
都会生效
可以通过 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
类型定义
下列是常用的方法
覆盖方式,未定义的字段会设置为 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’ 支持一下 谢谢!
文章浏览阅读3k次。架构师 日常工作_研发经理和架构师
文章浏览阅读644次。公司内部搭建基于git版本管理的平台Gitlab挂了,为记录下自己版本更迭的代码情况,又不想代码泄露。选择使用早先自己搭建的svn环境,记录下过程,免得后面再度使用时候又遗忘了步骤。kotlin被宣布作为开发Android APP的官方语言已经接近一年,除去开始蹭下热度,稍稍感受下语法变化,未有更进一步的了解。此时,闲来无事,加上近期看到的些项目陆续都有以kotlin作为开发语言的情况,还..._android studio关联svn
文章浏览阅读244次。MySQLMySQL 数据库创建数据库create database if not exists user default charset utf8;创建数据库,该命令的作用:如果数据库不存在则创建,存在则不创建。创建user数据库,并设定编码集为utf8删除数据库删库有风险,动手需谨慎drop database user;MySQL 数据表创建MySQL数据表需要以下信息:表名表字段名定义每个表..._增加操作
文章浏览阅读1.4k次。本文主要介绍运算符重载和友元的类设计,通过定义一个矢量类来模拟随机漫步。矢量类分两种模式,直角坐标模式和极坐标模式。该函数允许用户选择行走的距离和补偿。该程序用一个变量表示位置,并报告到达指定距离住所需的部署。本文的重点是是理解运算符重载和友元函数代码如下:vector.h文件#ifndef VECTOR_H_#define VECTOR_H_#includenamespac_程序地漫步
文章浏览阅读323次。先挖个坑,会不断更新。1.SRM658 Div1 850 DancingForever题意:n个男孩和n个女孩,每个男孩喜欢至少一个女孩。你需要给出一种配对方案,满足至少有一对,且每个配对的男孩和他喜欢的女孩配对且他喜欢的其他女孩都被配了对,输出任意一组解。我们考虑直接二分图匹配。对于每个男孩,若你已经找不到增广路,那么肯定已经存在了一组可行解。为什么呢,我们考虑这个男孩找不到增广路,那就说明了他喜_tc 刷题
文章浏览阅读2.4k次,点赞5次,收藏8次。WebView是一个基于webkit引擎、展现web页面的控件。Android的Webview在低版本和高版本采用了不同的webkit版本内核,4.4后直接使用了Chrome。显示和渲染web界面直接使用html文件(网络上或者本地asset)作为布局可与JavaScript交互调用WebView控件功能强大,除了具有一般View的属性和设置外,还可以对url请求、页面加载、渲染、页面交互进行强大的处理。_android webview与js交互
文章浏览阅读465次。用HttpServletRequest,现在整理如下,以便以后查阅请求与响应相关的类和接口非常多,下表是主要的与请求和接口相关的类以及接口。主要的与请求和接口相关的类及接口方 法说 明ServletInputStreamServlet的输入流ServletOutputStreamServlet的输出流ServletRequest代表Servl...
文章浏览阅读3.6w次,点赞6次,收藏46次。dbeaver是免费和开源(GPL)为开发人员和数据库管理员通用数据库工具。在开发过程中能够极大的提升我们的工作效率,下面我把我日常使用到的功能描述一下:1:与plsql相比,Dbeaver没有右击直接查看表注释的功能,但是Dbeaver提供了一个“打开声明”的功能,里面可以查看一些比较实用的内容:表列注释、创建该表的create语句:2:在一般开发的情况下,往往需要查询的数据条数不会..._dbeaver查看字段注释
文章浏览阅读2.1w次,点赞27次,收藏175次。新闻资讯CMS内容管理系统的设计与实现(一)目录:1、项目背景:2、项目规划:3、系统结构图:4、系统架构图:5、系统用例图:6、业务流程图:7、E-R图:8、领域模型:9、数据字典:10、DDL建表语句:11、数据流图:1、项目背景:如标题,新闻资讯CMS内容管理系统的设计与实现,主要功能包括浏览新闻、编辑发布、用户管理、评论回复、文章收藏、广告管理、分栏管理等等。后台框架:Spring + S..._新闻内容管理系统活动图
文章浏览阅读135次。查看文件find / -name ‘nginx’_linux中的qq命令
文章浏览阅读1.4k次,点赞17次,收藏32次。使用Addressable的热更新资源的机制,结合HybridCLR(华佗)对脚本的封装。实现资源和脚本全部热更新控制。_unity addressable hyhridclr
文章浏览阅读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...