FcDesigner

Appearance

原型方法 ​

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

导入自定义组件 ​

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

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

参数：

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

示例：

js
import FcDesigner from '@form-create/designer';


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

用于展示的渲染器 ​

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

typescript
  type formCreate = FormCreate;

用于设计的渲染器 ​

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

typescript
  type designerForm = FormCreate;

导入菜单分类 ​

用于全局导入菜单分类

typescript
  type addMenu = (menu: Menu | Menu[], before?: boolean) => void;

参数：

  • menu： 菜单分类
  • before（可选）： 为 true 时显示在最前面。

示例：

js
import FcDesigner from '@form-create/designer';


FcDesigner.addMenu({
    name: 'Business',
    title: '业务组件',
});

导入拖拽规则 ​

用于全局导入拖拽规则

typescript
  type addDragRule = (dragRule: DragRule | DragTemplateRule | Array<DragRule | DragTemplateRule>, before?: boolean) => void;

参数：

  • dragRule： 拖拽规则
  • before（可选）： 为 true 时显示最前面。

示例：

js
import FcDesigner from '@form-create/designer';


FcDesigner.addDragRule({
    menu: 'Business',
    icon: 'icon-title',
    label: '标题',
    //唯一 ID
    name: 'title',
    //组件可以配置的事件
    event: ['click'],
    //,,,,
});