扩展容器组件

容器组件允许你将其他组件嵌套在其中，提供了更灵活的布局能力。在以下示例中，我们定义了一个容器组件 Col，并说明如何在设计器中使用它。

定义组件

首先，我们定义一个简单的 Col 容器组件，它可以容纳其他组件，并显示一个说明信息。

<template>
    <div class="col">
        <div>
            <slot></slot>
        </div>
        <span>slot是拖入组件的回显区域</span>
    </div>
</template>


<script setup>
    import { defineProps } from 'vue';


const props = defineProps({
        span: {
            type: Number,
            default: 12
        }
    });
</script>


<style scoped>
    .col {
        border: 1px solid #ddd;
        padding: 10px;
        box-sizing: border-box;
        position: relative;
    }
</style>

• : 插槽用于放置拖入的组件。
• props: span 属性用于控制容器的宽度。

导入并挂载自定义组件

接下来，我们需要将自定义组件导入到 FcDesigner 中，并进行挂载。

//导入自定义组件
import Col from './Col.Vue';
import FcDesigner from '@form-create/designer';


//挂载自定义组件
FcDesigner.component('Col', Col);
//或者全局挂载
app.component('Col', Col);

定义组件的拖拽规则

我们为 Col 容器组件定义拖拽规则，以便它可以在设计器中被拖拽和配置。

const colRule = {
    //插入菜单位置
    menu: 'layout',
    //图标
    icon: 'icon-col',
    //名称
    label: '格子',
    //id,唯一!
    name: 'col',
    //可以向内部拖入组件
    drag: true,
    //组件操作按钮生成在组件的内部还是外部
    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}
        }];
    }
};

配置说明

• menu: 定义组件在左侧菜单中的位置，这里设置为 layout。
• icon: 组件在菜单中的图标。
• label: 组件的名称。
• name: 组件的唯一 ID。
• drag: 允许拖拽该组件。
• inside: 设置为 true，表示组件操作按钮将显示在组件内部。
• mask: 设置为 false，表示容器组件不会显示遮罩。
• rule: 组件的生成规则，包括类型、属性和子组件。
• props: 定义组件的属性配置项，这里使用 slider 组件来调整宽度（span）。

挂载组件的拖拽规则

//挂载拖拽规则
this.$refs.designer.addComponent(colRule);

通过上述步骤，你可以创建一个容器组件，并将其添加到设计器中。这样可以灵活地管理和布局其他组件，使设计更加高效和有序。如果你需要更复杂的功能或样式，可以在组件中进一步扩展和定制。