开源项目低代码表单设计器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 fro