原型方法

FcDesigner 提供了几种关键的原型方法来扩展和配置设计器。以下是这些方法的详细说明及示例：

导入自定义组件

允许您将自定义组件导入到设计器中，并可选地指定一个预览组件。这对于在设计器中扩展新的组件非常有用。

type component = (name: string, component: Component, preview?: Component) => void;

参数：

• name： 组件的名称，作为在设计器中识别组件的标识符。
• component： 实际的组件对象，这将用于设计器中的拖放操作。
• preview（可选）： 用于在设计器中预览的组件。如果不提供，则只使用 component。

示例：

import FcDesigner from '/path/to/fcDesignerPro/dist/index.es.js';


FcDesigner.component('myCustomComponent', MyCustomComponent, MyCustomComponentPreview);

用于展示的渲染器

获取用于表单展示的FormCreate渲染器。

  type formCreate = FormCreate;

用于设计的渲染器

获取用于表单设计的FormCreate渲染器。

  type designerForm = FormCreate;

扩展计算函数

允许您扩展设计器的计算功能，添加新的计算函数或扩展现有计算规则。您可以提供一个单独的计算函数或一个计算函数数组。

  type setFormula = (formula: Formula | Formula[]) => void;

参数：

• formula： 可以是单个 Formula 对象或 Formula 对象数组，用于定义新的计算函数。

示例：

import FcDesigner from '/path/to/fcDesignerPro/dist/index.es.js';


const newFormulas: Formula[] = [
  {
    menu: 'math',
    name: 'add',
    info: '计算两个数的和',
    example: 'add(1, 2)',
    handle: (a: number, b: number) => a + b
  },
  {
    menu: 'string',
    name: 'concat',
    info: '连接两个字符串',
    example: 'concat("Hello", " World")',
    handle: (a: string, b: string) => a + b
  }
];


FcDesigner.setFormula(newFormulas);