设计器的方法

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

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

Vue3

vue

<template>
    <fc-designer ref="designer"/>
</template>
<script setup>
    import {onMounted} from "vue";
    const designer = ref(null);
    //注意：需等待组件完成初始化后，方可调用其方法
    onMounted(() => {
        designer.value.addComponent([
            //扩展组件
        ])
    });
</script>

Vue2

vue

<template>
    <fc-designer ref="designer"></fc-designer>
</template>
<script>
    export default {
        name: 'Component',
        //注意：需等待组件完成初始化后，方可调用其方法
        mounted() {
            this.$refs.designer.addComponent([
                //扩展组件
            ])
        }
    };
</script>

方法

组件实例方法及使用说明：

方法名	描述	类型定义
addComponent	将一个或多个组件模板或拖拽组件添加到设计器，并根据 `menu` 字段自动归类到对应菜单下。	`AddComponent`
setMenuItem	将拖拽组件覆盖添加到指定的菜单下，`menuName` 为目标菜单名称。	`(menuName: string, list: MenuList) => void`
addMenu	向设计器左侧菜单栏添加一个新的菜单项。	`(menu: Menu) => void`
setRule	设置表单生成的规则，支持字符串或规则对象数组。	`(rule: string \| Rule[]) => void`
setOption	设置表单的配置选项（如布局、标签宽度）。别名方法：`setOptions`。	`(opt: Options) => void`
mergeOptions	通过合并方式更新表单配置选项。	`(opt: Options) => void`
getRule	获取当前表单的渲染规则（数组形式）。	`() => Rule[]`
getJson	获取当前表单的 JSON 渲染规则（字符串形式）。	`() => string`
getOption	获取当前表单的配置对象。别名方法：`getOptions`。	`() => Options`
getOptionsJson	获取当前表单的 JSON 配置（字符串形式）。	`() => string`
getFormData	获取当前表单的 `formData` 对象。	`() => Object`
setFormData	设置表单的 `formData` 对象（用于预填充数据）。	`(formData: Object) => void`
getDescription	获取表单的层级结构数据。	`() => TreeData`
getFormDescription	获取表单组件的层级结构数据。	`() => TreeData`
openPreview	打开表单预览模式。	`() => void`
openInputData	开启或关闭数据录入模式（`true` 开启，`false` 关闭）。	`(open: boolean) => void`
clearDragRule	清空设计器中的所有表单组件。	`() => void`
fields	获取设计器中所有字段的名称列表。	`() => string[]`
triggerActive	选中指定组件（支持规则对象或 `field`/`name`/`_fc_id`）。	`(rule: Rule \| string) => void`
clearActiveRule	清除当前选中的组件状态。	`() => void`
setFormRuleConfig	设置表单配置规则（同 `config.formRule`）。	`(rule: () => Rule[], append: boolean) => void`
setBaseRuleConfig	设置组件基础配置规则（同 `config.baseRule`）。	`(rule: () => Rule[], append: boolean) => void`
setComponentRuleConfig	设置指定组件的属性配置规则（同 `config.componentRule`）。	`(id: string, rule: () => Rule[], append: boolean) => void`

类型定义

展开

// 单组件或组件数组添加
type AddComponent =
    (dragRule: dragRule | dragTemplateRule) => void |
        (dragRule: Array<dragRule | dragTemplateRule>) => void;


// 菜单项操作
type SetMenuItem = (menuName: string, list: MenuList) => void;
type AddMenu = (menu: Menu) => void;


// 规则与配置操作
type SetRule = (rule: string | Rule[]) => void;
type SetOption = (opt: Options) => void;
type MergeOptions = (opt: Options) => void;
type GetRule = () => Rule[];
type GetJson = () => string;
type GetOption = () => Options;
type GetOptionsJson = () => string;


// 表单数据操作
type GetFormData = () => Object;
type SetFormData = (formData: Object) => void;


// 结构数据获取
type GetDescription = () => TreeData;
type GetFormDescription = () => TreeData;


// 视图控制
type OpenPreview = () => void;
type OpenInputData = (open: boolean) => void;


// 设计器操作
type ClearDragRule = () => void;
type Fields = () => string[];
type TriggerActive = (rule: Rule | string) => void;
type ClearActiveRule = () => void;


// 规则配置
type SetFormRuleConfig = (rule: () => Rule[], append: boolean) => void;
type SetBaseRuleConfig = (rule: () => Rule[], append: boolean) => void;
type SetComponentRuleConfig = (id: string, rule: () => Rule[], append: boolean) => void;

完整配置项的类型定义可参考 TypeScript 数据结构文档：Ts数据结构

设计器的方法 ​

方法 ​

类型定义 ​

设计器的方法

方法

类型定义