FcDesigner

Appearance

调整右侧配置顺序 ​

在使用表单设计器时，您可能需要根据个人偏好或项目需求来调整右侧配置面板的顺序，以提高开发效率和便捷性。本文将详细介绍如何通过配置 config.configFormOrder 来调整这些项目的显示顺序。

showConfig.png

数据结构 ​

配置顺序通过以下数据结构进行管理：

ts
type configFormOrder = Array<'base' | 'advanced' | 'props' | 'slots' | 'style' | 'event' | 'validate'>;

默认顺序 ​

设计器默认的配置项目排列顺序如下：

  1. base: 基础配置

  2. advanced: 高级配置

  3. props: 组件属性配置

  4. slots: 快捷插槽配置

  5. style: 样式配置

  6. event: 事件配置

  7. validate: 验证配置

这些配置项为您提供了灵活、全面的配置选项，便于您针对表单的不同方面进行详细调整。

如何调整配置顺序 ​

假设您希望将“组件属性配置（props）”调整到第一个位置，以下是具体的设置方法：

示例：调整顺序使用示例 ​

通过下面的示例代码，您可以更改配置顺序，以满足您的使用需求：

vue
<template>
    <fc-designer ref="designer" :config="config" />
</template>


<script setup>
    const config = {
        configFormOrder: ['base', 'advanced', 'props', 'slots', 'style', 'event', 'validate']
    }
</script>

在此配置中，“组件属性配置（props）”将首先显示，以快捷地调整组件的属性。