开源项目低代码表单设计器FcDesigner扩展自定义组件

开源项目低代码表单设计器FcDesigner中的通过将自定义组件集成到设计器中,您可以添加额外的界面元素和功能,从而增强设计器的适用性和灵活性。以下是详细步骤,以帮助您创建、导入、注册和配置自定义组件。

源码地址: Github | Gitee | 文档

导入并注册自定义组件

首先,您需要将自定义组件导入到您的项目中,并将其注册到 formCreate 设计器中或者 Vue 的全局应用中,以确保组件可以在设计器中被识别和渲染。

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

// 注册自定义组件到设计器
FcDesigner.component('MyButton', MyButton);

// 或者全局注册组件
app.component('MyButton', MyButton);

定义组件的拖拽规则

接下来,您需要定义自定义组件的拖拽规则。这些规则决定了组件在设计器中的菜单位置、图标、名称,以及组件的默认行为和属性配置。

javascript 复制代码
const buttonRule = {
  menu: 'aide', // 菜单位置
  icon: 'icon-button', // 图标
  label: '自定义按钮', // 显示名称
  name: 'MyButton', // 唯一标识符
  mask: true, // 是否可操作
  event: ['click'], // 组件事件
  rule({ t }) {
    // 自定义组件生成规则
    return {
      type: 'MyButton',
      props: {},
      children: ['按钮'],
    };
  },
  props(_, { t }) {
    // 自定义组件属性配置
    return [
      {
        type: 'input',
        title: '内容',
        field: 'formCreateChild',
      },
      {
        type: 'select',
        title: '尺寸',
        field: 'size',
        options: [
          { label: 'large', value: 'large' },
          { label: 'default', value: 'default' },
          { label: 'small', value: 'small' },
        ],
      },
    ];
  },
};

挂载组件的拖拽规则

将定义好的拖拽规则挂载到设计器实例中,以便生效。

js 复制代码
<template>
  <fc-designer ref="designer" />
</template>

<script setup>
import FcDesigner from '@form-create/designer';
import { ref, onMounted } from 'vue';

const designer = ref(null);

onMounted(() => {
  // 将拖拽规则挂载到设计器
  designer.value.addComponent(buttonRule);
});
</script>

示例:创建自定义组件

假设您创建了一个简单的按钮组件,这是自定义组件 MyButton.vue 的实现:

js 复制代码
<template>
  <button :class="`btn ${size}`" @click="handleClick">
    {{ label }}
  </button>
</template>

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

const props = defineProps({
  label: {
    type: String,
    default: '按钮',
  },
  size: {
    type: String,
    default: 'default',
  },
});

const emit = defineEmits(['click']);

function handleClick() {
  emit('click');
}
</script>

<style>
.btn {
  padding: 10px;
  border: none;
  cursor: pointer;
}
.btn.large {
  font-size: 20px;
}
.btn.default {
  font-size: 16px;
}
.btn.small {
  font-size: 12px;
}
</style>

通过这些步骤,您可以将自定义组件成功集成到 formCreate 设计器中,允许用户通过拖拽的方式使用这些组件,进而提升设计器在项目中的实用性和适配性。

相关推荐
533_12 分钟前
[element-ui] el-tree 组件鼠标双击事件
前端·javascript·vue.js
麦麦大数据37 分钟前
F031 Vue+Flask深度学习+机器学习多功能识别系统
vue.js·深度学习·flask
NocoBase1 小时前
华数传媒用 NocoBase 快速搭建 AI 多模态研发平台
人工智能·低代码·开源
xhload3d1 小时前
WebGL/Canvas 内存泄露分析
低代码·3d·html5·webgl·数字孪生·可视化·软件开发·工业互联网·内存泄漏·轻量化·技术应用·hightopo
FIT2CLOUD飞致云2 小时前
喜报丨MaxKB开源智能体平台入选2025年浙江省“数智优品”名单
人工智能·开源
写不来代码的草莓熊2 小时前
vue前端面试题——记录一次面试当中遇到的题(10)
前端·vue.js·面试
踩着两条虫2 小时前
VTJ.PRO低代码快速入门指南
前端·低代码
Lazy_zheng2 小时前
一场“数据海啸”,让我重新认识了 requestAnimationFrame
前端·javascript·vue.js
vx Biye_Design3 小时前
servlet宠物医院管理系统-计算机毕业设计源码77418
java·vue.js·spring·servlet·eclipse·mybatis
一枚前端小能手3 小时前
🔥 重学Vue之computed、watch、watchEffect原理与用途详解
前端·javascript·vue.js