调整右侧配置顺序

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

数据结构

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

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

默认顺序

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

• base: 基础配置
• advanced: 高级配置
• props: 组件属性配置
• slots: 快捷插槽配置
• style: 样式配置
• event: 事件配置
• validate: 验证配置

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

如何调整配置顺序

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

示例：调整顺序使用示例

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

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


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

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