设计器的配置

本文档包含组件的props参数配置指南及完整参数说明

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

Vue3

<template>
    <fc-designer ref="designer" :height="height" :config="config"/>
</template>
<script setup>
    const designer = ref(null);
    const height = ref('100vh');
    const config = ref({
        showSaveBtn: true
    });
</script>

Vue2

<template>
    <fc-designer ref="designer" :height="height" :config="config"></fc-designer>
</template>
<script>
    export default {
        name: 'Component',
        data() {
            return {
                height: '100vh',
                config: {
                    showSaveBtn: true
                },
            };
        },
    };
</script>

配置项

组件支持的完整配置项及说明如下：

属性名	描述	类型
locale	多语言配置对象。默认为中文。通过设置此属性，可以切换到其他语言的界面文本。	Object
field	管理左侧的字段列表。	FieldList
list	管理左侧的表单列表。	FormList
mask	是否显示组件遮罩层。默认为 true，此时用户无法操作组件。设置为 false 可以让用户直接操作设计器中的组件。	boolean
height	设计器组件的高度。可以使用字符串（如 500px, 100vh）或数字（如 500）。指定设计器的显示高度。	string|number
menu	自定义左侧菜单列表。此配置会覆盖设计器的默认菜单列表。MenuList 应包含你希望在设计器左侧显示的菜单项。	MenuList
config	配置设计器内的模块显示状态和默认规则。通过此配置，可以控制哪些模块可见，查看完整配置说明。	Config
handle	设计器顶部的扩展操作按钮。Handle 是一个包含按钮名称和回调函数的数组。通过此配置，可以添加自定义操作按钮并指定其行为。	Handle

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

示例

定义设计器的高度

<template>
    <fc-designer ref="designer" :height="height"></fc-designer>
</template>
<script>
    export default {
        name: 'Component',
        data() {
            return {
                height: '100vh',
            };
        },
    };
</script>

隐藏子表单菜单

<template>
    <fc-designer ref="designer" :config="config"></fc-designer>
</template>
<script>
    export default {
        name: 'Component',
        data() {
            return {
                config: {
                    hiddenMenu: ['subform']
                },
            };
        },
    };
</script>

隐藏指定组件

<template>
    <fc-designer ref="designer" :config="config"></fc-designer>
</template>
<script>
    export default {
        name: 'Component',
        data() {
            return {
                config: {
                    hiddenItem: ['subForm', 'group', 'tree', 'elTreeSelect']
                },
            };
        },
    };
</script>

显示保存按钮

<template>
    <fc-designer ref="designer" :config="config" @save="save"></fc-designer>
</template>
<script>
    export default {
        name: 'Component',
        data() {
            return {
                config: {
                    showSaveBtn: true
                },
            };
        },
        methods: {
            save() {
                // todo
            }
        }
    };
</script>