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

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

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

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

数据结构

type Inject = {
    api: API,//表单的 API
    self: 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;
})