FcDesigner Pro

Appearance

设计器的方法 ​

通过 refs.designer 可以调用 fc-designer 组件的各种方法来操作和配置设计器。以下是各方法的详细说明及示例：

移动端设计器是fc-designer-mobile组件

vue
<fc-designer ref="designer" />

添加模板和拖拽组件的描述文件 ​

ts
  type addComponent = (dragRule: dragRule|dragTemplateRule) =>void;
  type addComponent = (dragRule: Array<dragRule|dragTemplateRule>) =>void;

将一个或多个组件模板或拖拽组件添加到设计器中，并根据 menu 字段自动将其添加到对应的菜单下。

覆盖添加拖拽组件到指定的菜单下 ​

ts
  type setMenuItem = (menuName: string, list: MenuList) => void;

将拖拽组件覆盖添加到指定的菜单下。menuName 是目标菜单的名称，list 是要添加的组件列表。

在设计器左侧添加新的菜单 ​

ts
  type addMenu = (menu: Menu) =>void;

向设计器的左侧菜单栏添加一个新的菜单项。menu包含菜单的标题、图标和菜单项列表。

设置设计器表单的生成规则 ​

typescript
  type setRule = (rule: string|Rule[]) => void;

设置表单生成的规则。可以传入规则的字符串或规则对象数组。

设置设计器表单的表单配置 ​

ts
  type setOption = (opt: Options) => void;

设置表单的配置选项，例如布局和标签宽度。

别名方法setOptions

获取设计器表单的渲染规则(Array) ​

ts
  type getRule = () => Rule[];

获取当前表单的渲染规则，以数组形式返回。

获取设计器表单的json渲染规则(string) ​

ts
  type getJson = () => string;

获取当前表单的 JSON 渲染规则，以字符串形式返回。

获取设计器表单的表单配置(Object) ​

ts
  type getOption = () => Options;

获取当前表单的配置对象。

别名方法getOptions

获取设计器表单的表单的json配置(string) ​

ts
  type getOptionsJson = () => string;

获取当前表单的 JSON 配置，以字符串形式返回。

获取表单的formData ​

typescript
  type getFormData: () => Object;

获取当前表单的 formData 对象。

设置表单的formData ​

typescript
  type setFormData: (formData: Object) => void;

设置表单的 formData 对象，用于预填充表单数据。

获取设计器的表单的层级数据类型 ​

typescript
  type getTree: () => TreeData;

获取设计器中表单的层级结构数据。

获取设计器的表单中表单组件的数据类型 ​

typescript
  type getFormTree: () => TreeData;

获取设计器中表单组件的层级结构数据。

预览表单 ​

ts
  type openPreview = () => void;

打开表单的预览模式，以便查看最终效果。

开启录入数据模式 ​

typescript
  type openInputData: (open: boolean) => void;

开启或关闭数据录入模式。open 为 true 时开启，false 时关闭。

清空设计器的表单 ​

ts
  type clearDragRule = () => void;

清空设计器中的所有表单组件。

获取设计器中所有的字段名 ​

typescript
  type fields = () => string[];

获取当前设计器中所有字段的名称列表。

选中设计器中指定组件 ​

ts
  type triggerActive = (rule:Rule|string) => void;

选中指定的组件，rule 是组件的规则或者组件的field、name或者_fc_id。

清空设计器中组件的选中状态 ​

ts
  type clearActiveRule = () => void;

清除当前选中的组件状态。

设置表单配置的表单规则 ​

ts
  type setFormRuleConfig = (rule: () => Rule[], append: boolean) => void;

设置表单配置的规则，与config.formRule相同。

设置组件基础配置表单的表单规则 ​

ts
  type setBaseRuleConfig = (rule: () => Rule[], append: boolean) => void;

设置组件基础配置表单的规则，与config.baseRule相同。

设置组件验证配置表单的表单规则 ​

ts
  type setValidateRuleConfig = (rule: () => Rule[], append: boolean) => void;

设置组件验证配置表单的规则，于config.validateRule相同。

设置指定组件属性配置的表单规则 ​

ts
  type setComponentRuleConfig = (id: string, rule: () => Rule[], append: boolean) => void;

设置指定组件属性配置的表单规则，与config.componentRule相同。

预设全局数据源 ​

ts
  type setGlobalData = (data: GlobalData) => void;

预设全局数据源，用于设计器中。

预设全局事件 ​

ts
  type setGlobalEvent = (event: GlobalEvent) => void;

预设全局事件，用于设计器中。

预设全局样式 ​

typescript
  type setGlobalClass = (class: GlobalClass) => void;

预设全局样式，用于设计器中。

开启全局事件弹窗 ​

typescript
  type openGlobalEventDialog = () => void;

开启全局数据源弹窗 ​

typescript
  type openGlobalFetchDialog = () => void;

开启全局样式弹窗 ​

typescript
  type openGlobalClassDialog: () => void;