form-create中在事件中获取api
FormCreate 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持5个UI框架,并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件,再复杂的表单都可以轻松搞定
FormCreate官网:https://www.form-create.com
帮助文档:https://pro.form-create.com/doc
体验地址:https://pro.form-create.com/view
数据结构
inject 参数的数据结构
type InjectArg = {
api: APi,//api
rule: Rule[],//生成规则
self: Rule,//当前生成规则
option: Object,//全局配置
inject: Any,//自定义注入的参数
args: any[],//原始回调参数
}
向事件中注入fApi和自定义数据的示例
<template>
<form-create :rule="rule" v-model:api="fApi" :option="options" @prefix1-change="change"/>
</template>
<script>
export default {
data() {
return {
fApi: {},
options: {
onSubmit: (formData) => {
alert(JSON.stringify(formData))
},
wrap: {
labelCol: {
span: 4
}
}
},
rule: [
{
type: 'input',
field: 'inputField2',
title: 'change 事件',
emit: [{
name: 'change',
inject: ['自定义参数,数据类型不限']
}],
emitPrefix: 'prefix1',
},
{
type: 'input',
field: 'inputField',
title: 'blur 事件',
inject: true,
on: {
blur: this.blur
}
},
]
}
},
methods: {
change(inject) {
alert(`change: "${inject.self.value}", inject:"${inject.inject}"`)
},
blur(inject) {
alert(`blur: "${inject.self.title}"`)
}
}
}
</script>
全局开启
事件注入也可以通过表单配置项injectEvent:true开启,对所以事件和原生事件开启事件注入
<template>
<form-create :rule="rule" v-model:api="fApi" :option="options" @prefix1-change="change"/>
</template>
<script>
export default {
data() {
return {
fApi: {},
options: {
onSubmit: (formData) => {
alert(JSON.stringify(formData))
},
wrap: {
labelCol: {
span: 4
}
},
//全局开启
injectEvent: true
},
rule: [
{
type: 'input',
field: 'inputField2',
title: 'change 事件',
emit: ['change'],
emitPrefix: 'prefix1',
},
{
type: 'input',
field: 'inputField',
title: 'blur 事件',
on: {
blur: this.blur
}
},
]
}
},
methods: {
change(inject) {
alert(`change: "${inject.self.value}", inject:"${inject.inject}"`)
},
blur(inject) {
alert(`blur: "${inject.self.title}"`)
}
}
}
</script>
事件注入功能可以向事件中注入fApi,rule等参数
开启事件注入后会给回调事件参数首位增加注入参数