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

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