开源项目低代码表单设计器FcDesigner扩展自定义的容器组件.例如col

开源项目低代码表单设计器FcDesigner中的容器组件可以帮助您实现更灵活的布局设计。在这里，我们以一个简单的 Col 容器组件为例，来演示如何定义和使用它。

源码地址: Github | Gitee | 文档

定义组件

首先，我们创建一个 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>

• <slot></slot>: 插槽用于放置拖入的组件。
• props: span: 控制容器的宽度。

导入并挂载自定义组件

接下来需要将自定义的 Col 组件导入到 formCreateDesigner，并进行挂载。

// 导入自定义组件
import Col from './Col.vue';
import FcDesigner from '@form-create/designer';// 挂载自定义组件
FcDesigner.component('Col', Col); // 在 FcDesigner 中注册
// 或者全局挂载到 Vue 实例
// app.component('Col', Col);

定义组件的拖拽规则

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

const colRule = {menu: 'layout', // 插入菜单位置icon: 'icon-col', // 图标label: '格子', // 名称name: 'col', // 唯一IDdrag: 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 } // Span 的取值范围}];}
};

配置说明:

• menu: 将组件放置在布局菜单中。
• icon: 菜单中的组件图标。
• label: 组件的显示名称。
• name: 组件的唯一标识符。
• drag: 允许组件在设计器中被拖动。
• inside: 操作按钮在组件内部显示。
• mask: 禁用遮罩显示。
• rule: 定义组件的基础规则及其内部子组件。
• props: 用于配置组件属性，使用滑块来调整宽度。

挂载组件的拖拽规则

将拖拽规则添加至设计器中，以启用组件的拖拽功能。

// 在您的组件生命周期中，常见于 mounted() 方法中挂载规则
this.$refs.designer.addComponent(colRule);

通过这些步骤，您可以创建一个灵活的容器组件，并将其集成到设计器中。这使得组件的管理和布局更加高效和有序。如果需要，可以进一步扩展组件功能或样式，以适应复杂的业务需求。