控制组件配置显隐

通过 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>

根据用户权限动态控制显隐和禁用状态

您可以根据用户权限或其他条件动态调整配置项的显隐和禁用状态。例如：

<template>
    <fc-designer ref="designer" :config="dynamicConfig"/>
</template>
<script setup>
    import { ref, onMounted } from 'vue';


const dynamicConfig = ref({});


onMounted(() => {
        // 假设通过某种方式获取用户权限
        const userPermissions = getUserPermissions();
        // 根据权限设置配置项
        dynamicConfig.value = {
            hiddenItemConfig: userPermissions.canEdit ? {} : { default: ['disabled'] },
            disabledItemConfig: userPermissions.canEdit ? {} : { default: ['disabled'] }
        };
    });
    function getUserPermissions() {
        // 模拟用户权限获取
        return { canEdit: false }; // 更改为 true 以启用编辑权限
    }
</script>