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

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

源码地址: Github | Gitee | 文档

定义组件

首先,我们创建一个 Col 组件,该组件可以容纳其他组件,并显示说明信息。

vue 复制代码
<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,并进行挂载。

js 复制代码
// 导入自定义组件
import Col from './Col.vue';
import FcDesigner from '@form-create/designer';

// 挂载自定义组件
FcDesigner.component('Col', Col); // 在 FcDesigner 中注册
// 或者全局挂载到 Vue 实例
// app.component('Col', Col);

定义组件的拖拽规则

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

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

配置说明:

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

挂载组件的拖拽规则

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

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

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

相关推荐
wkj0012 小时前
vue中 js-cookie 用法
前端·javascript·vue.js
mldong8 小时前
mldong-goframe:基于 GoFrame + Vben5 的全栈快速开发框架正式开源!
vue.js·后端·go
canonical_entropy9 小时前
集成NopReport动态生成复杂Word表格
后端·低代码
大师兄666810 小时前
「源力觉醒 创作者计划」_文心开源模型(ERNIE-4.5-VL-28B-A3B-PT)使用心得
百度·开源·文心大模型·gitcode·文心开源模型·ernie-4.5·开源模型部署
DogDaoDao10 小时前
2025年 GitHub 主流开源视频生成模型介绍
人工智能·深度学习·开源·大模型·github·音视频·视频生成
快起来别睡了11 小时前
Vuex 与 Pinia:Vue 状态管理详解,小白也能看懂
vue.js
军军君0112 小时前
基于Springboot+UniApp+Ai实现模拟面试小工具三:后端项目基础框架搭建上
前端·vue.js·spring boot·面试·elementui·微信小程序·uni-app
三花AI12 小时前
OpenArt Story 一键生成完整叙事短视频
开源
Codebee13 小时前
OneCode3.0插件开发指南:注解驱动的UI功能扩展框架
低代码
算家计算13 小时前
全链路开源+PBR物理渲染!Hunyuan3D-2.1本地部署教程:重新定义工业级3D生成
人工智能·开源