控制组件配置显隐

通过 config.hiddenItemConfig 和 config.disabledItemConfig 字段，您可以控制设计器中右侧配置项的显隐和禁用状态。这些配置可以帮助您更精细地管理表单设计器的用户界面，使其更加符合业务需求。

数据结构

type Config = {
    //隐藏组件的部分配置项
    hiddenItemConfig?: {
        //隐藏所有组件的指定配置
        default?: string[];
        //拖拽规则name: 隐藏的字段名
        [id: string]: string[];
    };
    //禁用组件的部分配置项
    disabledItemConfig?: {
        //禁用所有组件的指定配置
        default?: string[];
        //拖拽规则name: 禁用的字段名
        [id: string]: string[];
    };
}

隐藏指定配置项

使用 hiddenItemConfig 隐藏右侧配置面板中的指定配置项。例如，隐藏所有组件的 disabled 配置项和输入框组件的 field 配置项：

<template>
    <fc-designer ref="designer" :config="config"/>
</template>
<script setup>
    const config = {
        hiddenItemConfig: {
            default: ['disabled'],
            input: ['field']
        },
    }
</script>

禁用指定配置项

使用 disabledItemConfig 禁用右侧配置面板中的指定配置项。例如，禁用所有组件的 disabled 配置项和输入框组件的 field 配置项：

<template>
    <fc-designer ref="designer" :config="config"/>
</template>
<script setup>
    const config = {
        disalbedItemConfig: {
            default: ['disabled'],
            input: ['field']
        },
    }
</script>

表单组件基础配置字段名

配置项	字段 ID
字段ID	field
字段名称	title
提示信息	info
数据联动	control