form-create-designer中$inject参数的数据结构及各项属性说明

FcDesigner 是一款基于Vue的开源低代码可视化表单设计器工具，通过数据驱动表单渲染。可以通过拖拽的方式快速创建表单，提高开发者对表单的开发效率，节省开发者的时间。并广泛应用于在政务系统、OA系统、ERP系统、电商系统、流程管理等领域。

源码地址: Github | Gitee | 文档 | 在线演示

本文详解事件回调中 $inject 参数的数据结构及各项属性说明。

数据结构

type Inject = {api: API,//表单的 APIself: Rule,//当前组件的生成规则option: Object,//表单全局配置args: any[],//函数的原始参数
}

示例 1: 调用 API 方法

const api = $inject.api;
const formData = api.formData();

示例 2: 获取事件的原始参数

例如组件触发 change 事件时，会传递出当前的 value 值。

emit('change', value);
//or
//props.change(value);

获取 value 值

const value = $inject.args[0];

如果事件存在多个参数时

emit('beforeUpload', file, fileList);
//or
//props.beforeUpload(file, fileList);

获取参数

const file = $inject.args[0];
const fileList = $inject.args[1];

示例3: 修改当前组件规则

例如当 value 修改后通过接口修改组件状态

const api = $inject.api;
const value = $inject.args[0];
api.fetch({action: '/api/getdata',query:{value}
}).then(res=>{//修改自己$inject.self.options = res.data;//修改其他组件$inject.api.getRule('name').value = res.name;
})