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等參數

開啓事件注入後會給回調事件參數首位增加註入參數