form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持3个UI框架，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。
2.5.9主要更新了以下内容:
fetch 功能, 加载异步数据subForm 组件新增 syncDisabled 配置项新增 factory 方法, 创建一个全新的 formCreate 对象 (说明)
新增 自定义属性新增load事件,调整 init事件触发时机
新增 repeat 事件, 当组件字段重复时触发
优化 formData 数据, 支持增量返回额外字段
优化 支持element-ui表单的label-suffix配置项 #402
优化 remove事件触发时机
优化 增强json解析功能
修复 移除规则时可能意外报错问题
根据自己使用的 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为例
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))
}
}
}
}
}
StringStringString|ObjectanyObjectpropsString|ObjectBoolstring|Objectstring|ObjectArrayArrayradio,select,checkbox等组件option选择项ObjectObject类型: Array<rule|string|maker>
说明: 设置父级组件的插槽,默认为default.可配合 slot 配置项使用
formCreate.maker.create('button').children([
'按钮内容'
])
maker.input('text','text','text').children([
maker.create('span').children(['append']).slot('append')
])
formCreate.maker.create('i-row').children([
formCreate.maker.create('i-col').props('span',12).children([
formCreate.maker.template('<span>自定义组件</span>',() => new Vue)
]),
]) 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 表单验证未通过
}
微信关注我们
转载内容版权归作者及来源网站所有！
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。
为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。
Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。
Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。
扫码在手机上查看文章
扫描二维码，手机阅读更方便
有任何问题或合作意向欢迎联系我们
Email: 99873273@qq.com
QQ: 99873273