开源设计器 FcDesigner 限制组件是否可以拖入的教程

FcDesigner 是一款基于Vue的开源低代码可视化表单设计器工具，通过数据驱动表单渲染。可以通过拖拽的方式快速创建表单，提高开发者对表单的开发效率，节省开发者的时间。并广泛应用于在政务系统、OA系统、ERP系统、电商系统、流程管理等领域。

源码地址: Github | Gitee | 文档 | 在线演示

通过配置 allowDrag 和 denyDrag，您可以精细控制容器组件允许或禁止拖入的组件。这种控制可以帮助您根据具体的业务需求，定制拖拽功能的行为，确保表单设计的一致性和规范性。

数据结构

ts 复制代码

//可拖入的组件列表
type AllowDrag = string[] | {
    //可拖入的菜单列表
    menu: string[];
    //可拖入的组件列表
    item: string[];
}
//不可拖入的组件列表
type DenyDrag = string[] | {
    //不可拖入的菜单列表
    menu: string[];
    //不可拖入的组件列表
    item: string[];
}

AllowDrag: 定义容器中允许拖拽的组件或菜单。可以是一个组件 name 的数组，或者一个对象，其中 menu 和 item 分别指定允许的菜单和组件。
DenyDrag: 定义容器中不允许拖拽的组件或菜单。可以是一个组件 name 的数组，或者一个对象，其中 menu 和 item 分别指定禁止的菜单和组件。
优先级: AllowDrag 配置优先级高于 DenyDrag。

基本示例

在一个"布局"容器中，只允许拖入布局相关的组件，如行和列组件。

vue 复制代码

<template>
    <fc-designer ref="designer" :config="config"/>
</template>
<script setup>
    const config = {
        allowDrag: {
            group: {
                item: ['fcRow']
                menu: ['main']
            }
        }
    }
</script>

限制不能拖入的组件

在一个分组组件中，禁止拖入子表单组件，但允许其他组件。

vue 复制代码

<template>
    <fc-designer ref="designer" :config="config"/>
</template>
<script setup>
    const config = {
        denyDrag: {
            subForm: {
                menu: ['subform']
            }
        }
    }
</script>

通过组件的拖拽规则限制

在一个格子组件中，仅允许拖入基础组件。

js 复制代码

const colRule = {
    menu: 'layout',
    icon: 'icon-col',
    label: '格子',
    name: 'col',
    //可以向内部拖入组件
    drag: true,
    //控制可拖入的组件
    allowDrag: {
        menu: ['main']
    },
    inside: true,
    mask: false,
    rule() {
        return {
            type: 'Col',
            props: {span: 12},
            children: []
        };
    },
    props(_, {t}) {
        return [{
            type: 'slider',
            title: '宽度',
            field: 'span',
            value: 12,
            props: {min: 0, max: 24}
        }];
    }
};