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等參數
開啟事件注入后會給回調事件參數首位增加注入參數
浙公網安備 33010602011771號