开源项目低代码表单设计器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 设计器中,允许用户通过拖拽的方式使用这些组件,进而提升设计器在项目中的实用性和适配性。

相关推荐
蚝油菜花1 小时前
DeepSite:基于DeepSeek的开源AI前端开发神器,一键生成游戏/网页代码
人工智能·开源
蚝油菜花1 小时前
PaperBench:OpenAI开源AI智能体评测基准,8316节点精准考核复现能力
人工智能·开源
蚝油菜花1 小时前
DreamActor-M1:字节跳动推出AI动画黑科技,静态照片秒变生动视频
人工智能·开源
cypking1 小时前
解决 axios get请求瞎转义问题
vue.js
向阳2561 小时前
SpringBoot+vue前后端分离整合sa-token(无cookie登录态 & 详细的登录流程)
java·vue.js·spring boot·后端·sa-token·springboot·登录流程
艾克马斯奎普特1 小时前
Vue.js 3 渐进式实现之响应式系统——第一节:系列开篇与响应式基本实现
vue.js
梅子酱~1 小时前
Vue 学习随笔系列二十二 —— 表格高度自适应
javascript·vue.js·学习
buxuku20081 小时前
从 0 到 2K Star:我的开源之旅与成长
开源
莫循瑾木2 小时前
Vue3 Composition API 完全指南
前端·vue.js·前端工程化
初辰ge2 小时前
后端说“基本增删改查都写好了,就差切图仔对接口了!”——我一怒之下撸了个代码生成器
前端·vue.js