Lowcoder_cn二开记录

事件处理器 控制组件默认设置值的方法

const childrenMap = {
  value: withDefault(stringExposingStateControl("value"), ''),
  style: styleControl(QRCodeStyle),
  dictOptions: dropdownControl(dictOptions, ""),
  dictCode: stringExposingStateControl('dictCode', ''),
  // status: stringExposingStateControl('status', 'active'),
  abc:stringExposingStateControl('abc', ''),
  onEvent: eventHandlerControl(EventOptions),
  dataURL: stateComp<string>(""),
  compID: stateComp<string>(Math.random().toString()),
};

上面的代码会默认添加如下方法:

可以看出只有stringExposingStateControl内的才会添加默认方法 查看代码路径：lowcoder_cn\client\packages\lowcoder\src\comps\controls\codeStateControl.tsx

function stateControlMethodExposing<T extends ExposeMethodCompConstructor<AbstractComp>>(
  VariantComp: T,
  param: ParamConfig,
  transformer?: (value: unknown) => JSONValue
) {
  return withMethodExposingBase(VariantComp, [
    {
      method: {
        name: trans("eventHandler.set") + _.upperFirst(param.name),
        description: trans("exportMethod.setDesc", { property: param.name }),
        params: [param],
      },
      execute: (comp, values) => {
        return (comp as IChangeMethods).change(
          transformer ? transformer(values[0]) : convertValue(values[0], param.type)
        );
      },
    },
    {
      method: {
        name: trans("eventHandler.clear") + _.upperFirst(param.name),
        description: trans("exportMethod.clearDesc", { property: param.name }),
        params: [],
      },
      execute: (comp) =>
        (comp as IChangeMethods).change(
          transformer ? transformer("") : getTypeDefaultValue(param.type)
        ),
    },
    {
      method: {
        name: trans("eventHandler.reset") + _.upperFirst(param.name),
        description: trans("exportMethod.resetDesc", { property: param.name }),
        params: [],
      },
      execute: (comp) => (comp as IChangeMethods).reset(),
    },
  ]) as T;
}

添加自定义方法

.setExposeMethodConfigs([
      // setExposeMethodConfigs 设置控制组件时调用的方法
      {
        method: {
          name: "abc",
          description: '测试abc',
          params: [{name:'测试',type:"string",description:"测试描述"}],
        },
        execute: async (comp, params) => {
          testData(comp,params)
        },
      }])
    .build();

该代码添加了abc方法 控制组件调用abc的时候 回去执行testData方法(注意跟下面的SetAbc区分开)

const testData=(comp:any,params:any): void => {
  console.log(comp,params);
  //可以添加一些自定义操作
}