FcDesigner Pro

Appearance

功能模块显隐 ​

通过配置config对象，您可以控制设计器中的功能模块的显示与隐藏。这些配置可以帮助您根据业务需求定制设计器的界面和功能。

vue
<template>
    <fc-designer ref="designer" :config="config"/>
</template>
<script setup>
    const config = {
        //隐藏拖拽操作按钮
        hiddenDragMenu: false;
        //隐藏拖拽按钮
        hiddenDragBtn: false;
        //是否显示保存按钮
        showSaveBtn?: true;
        //是否显示右侧的配置界面
        showConfig?: true;
        //是否显示组件的基础配置表单
        showBaseForm?: true;
        //是否显示组件联动
        showControl?: true;
        //是否显示模块管理
        showPageManage?: true;
        //是否显示组件的高级配置表单
        showAdvancedForm?: true;
        //是否显示组件的属性配置表单
        showPropsForm?: true;
        //是否显示组件的样式配置表单
        showStyleForm?: true;
        //是否显示组件的事件配置表单
        showEventForm?: true;
        //是否显示组件的验证配置表单
        showValidateForm?: true;
        //是否显示json预览按钮
        showJsonPreview: boolean;
        //是否显示自定义props按钮
        showCustomProps: boolean;
        //是否显示表单配置
        showFormConfig?: true;
        //是否显示左侧的模板列表
        showTemplate?: true;
        //是否显示多端适配选项
        showDevice?: true;
    }
</script>

隐藏内置组件 ​

隐藏内置组件

隐藏拖拽操作按钮 ​

控制是否显示拖拽操作的按钮。设置为true会隐藏这些按钮。

hiddenDragMenu

vue
<template>
    <fc-designer ref="designer" :config="config"/>
</template>
<script setup>
    const config = {
        hiddenDragMenu: true // 隐藏拖拽操作按钮
    }
</script>

隐藏拖拽按钮 ​

控制是否显示拖拽按钮。设置为true会隐藏这些按钮。

hiddenDragBtn

vue
<template>
    <fc-designer ref="designer" :config="config"/>
</template>
<script setup>
    const config = {
        hiddenDragBtn: true // 隐藏拖拽按钮
    }
</script>

显示保存按钮 ​

控制是否显示保存按钮。设置为true会显示保存按钮，false则隐藏。

showSaveBtn

vue
<template>
    <fc-designer ref="designer" :config="config"/>
</template>
<script setup>
    const config = {
        showSaveBtn: true // 显示保存按钮
    }
</script>

隐藏表单配置 ​

控制是否显示表单配置界面。设置为false会隐藏表单配置。

showFormConfig

vue
<template>
    <fc-designer ref="designer" :config="config"/>
</template>
<script setup>
    const config = {
        showFormConfig: false // 隐藏表单配置
    }
</script>

隐藏录入默认数据按钮 ​

控制是否显示录入默认数据按钮。设置为false会隐藏录入默认数据的按钮。

showInputData

vue
<template>
    <fc-designer ref="designer" :config="config"/>
</template>
<script setup>
    const config = {
        showInputData: false // 隐藏录入默认数据按钮
    }
</script>

隐藏左侧的模板列表 ​

控制是否显示左侧的模板列表。设置为false会隐藏模板列表。

showTemplate

vue
<template>
    <fc-designer ref="designer" :config="config"/>
</template>
<script setup>
    const config = {
        showTemplate: false // 隐藏左侧模板列表
    }
</script>

隐藏左侧的JSON预览 ​

控制是否显示左侧的JSON预览模块。设置为false会隐藏JSON预览模块。

vue
<template>
    <fc-designer ref="designer" :config="config"/>
</template>
<script setup>
    const config = {
        showJsonPreview: false // 隐藏JSON预览模块
    }
</script>

隐藏右侧的配置界面 ​

控制是否显示右侧的配置界面。设置为false会隐藏配置界面。

showConfig

vue
<template>
    <fc-designer ref="designer" :config="config"/>
</template>
<script setup>
    const config = {
        showConfig: false // 隐藏右侧配置界面
    }
</script>

隐藏多端适配选项 ​

控制是否显示多端适配选项。设置为false会隐藏这些选项。

showDevice

vue
<template>
    <fc-designer ref="designer" :config="config"/>
</template>
<script setup>
    const config = {
        showDevice: false // 隐藏多端适配选项
    }
</script>

隐藏模块管理 ​

控制是否显示模块管理功能。设置为false会隐藏模块管理。

showPageManage

vue
<template>
    <fc-designer ref="designer" :config="config"/>
</template>
<script setup>
    const config = {
        showPageManage: false // 隐藏模块管理
    }
</script>

隐藏组件的基础配置表单 ​

控制是否显示组件的基础配置表单。设置为false会隐藏基础配置表单。

showBaseForm

vue
<template>
    <fc-designer ref="designer" :config="config"/>
</template>
<script setup>
    const config = {
        showBaseForm: false // 隐藏组件的基础配置表单
    }
</script>

隐藏组件的联动数据配置 ​

控制是否显示组件的联动数据配置。设置为false会隐藏联动数据配置。

showControl

vue
<template>
    <fc-designer ref="designer" :config="config"/>
</template>
<script setup>
    const config = {
        showControl: false // 隐藏组件的联动数据配置
    }
</script>

隐藏组件的高级配置 ​

控制是否显示组件的高级配置表单。设置为false会隐藏高级配置表单。

showAdvancedForm

vue
<template>
    <fc-designer ref="designer" :config="config"/>
</template>
<script setup>
    const config = {
        showAdvancedForm: false // 隐藏组件的高级配置
    }
</script>

隐藏组件的属性配置 ​

控制是否显示组件的属性配置表单。设置为false会隐藏属性配置表单。

showPropsForm

vue
<template>
    <fc-designer ref="designer" :config="config"/>
</template>
<script setup>
    const config = {
        showPropsForm: false // 隐藏组件的属性配置
    }
</script>

隐藏组件的自定义属性配置 ​

控制是否显示组件的自定义属性配置。设置为false时会隐藏。

vue
<template>
    <fc-designer ref="designer" :config="config"/>
</template>
<script setup>
    const config = {
        showCustomProps: false // 隐藏组件的自定义属性配置
    }
</script>

隐藏组件的样式配置 ​

控制是否显示组件的样式配置表单。设置为false会隐藏样式配置表单。

showStyleForm

vue
<template>
    <fc-designer ref="designer" :config="config"/>
</template>
<script setup>
    const config = {
        showStyleForm: false // 隐藏组件的样式配置
    }
</script>

隐藏组件的事件配置 ​

控制是否显示组件的事件配置表单。设置为false会隐藏事件配置表单。

showEventForm

vue
<template>
    <fc-designer ref="designer" :config="config"/>
</template>
<script setup>
const config = {
    showEventForm: false // 隐藏组件的事件配置
}
</script>

隐藏组件的验证配置 ​

控制是否显示组件的验证配置表单。设置为false会隐藏验证配置表单。

showValidateForm

vue
<template>
    <fc-designer ref="designer" :config="config"/>
</template>
<script setup>
    const config = {
        showValidateForm: false // 隐藏组件的验证配置
    }
</script>