FcDesigner

Appearance

Configuration Panel Order ​

Adjust the order of configuration panels in the designer using config.configFormOrder to match your preferences or project requirements.

showConfig.png

Data Structure ​

Configuration order is managed through the following data structure:

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

Default Order ​

The default configuration item order in the designer is as follows:

  1. base: Basic configuration

  2. advanced: Advanced configuration

  3. props: Component property configuration

  4. slots: Quick slot configuration

  5. style: Style configuration

  6. event: Event configuration

  7. validate: Validation configuration

These configuration items provide flexible options for adjusting different aspects of forms.

How to Adjust Configuration Order ​

To move "Component Property Configuration (props)" to the first position:

Example: Adjust Order Usage Example ​

Use the following configuration:

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

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

This configuration displays "Component Property Configuration (props)" first for quick property adjustments.