FormCreate中在事件中获取api

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,//apirule: 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等参数

开启事件注入后会给回调事件参数首位增加注入参数