设计器的配置

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

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

Vue3

vue

<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

vue

<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`
mask	是否显示组件遮罩层。默认为 `true`，此时用户无法操作组件。设置为 `false` 可以让用户直接操作设计器中的组件。	`boolean`
height	设计器组件的高度。可以使用字符串（如 `500px`, `100vh`）或数字（如 500）。指定设计器的显示高度。	`string\|number`
menu	自定义左侧菜单列表。此配置会覆盖设计器的默认菜单列表。`MenuList` 应包含你希望在设计器左侧显示的菜单项。	`MenuList`
config	配置设计器内的模块显示状态和默认规则。通过此配置，可以控制哪些模块可见，查看完整配置说明。	`Config`
handle	设计器顶部的扩展操作按钮。`Handle` 是一个包含按钮名称和回调函数的数组。通过此配置，可以添加自定义操作按钮并指定其行为。	`Handle`

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

设计器的配置 ​

配置项 ​

设计器的配置

配置项