当前位置：首页 > article >正文

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

article 2024/11/16 19:12:12

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

源码地址: Github | Gitee | 文档
在这里插入图片描述

导入并注册自定义组件

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

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

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

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

定义组件的拖拽规则

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

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' },
        ],
      },
    ];
  },
};

挂载组件的拖拽规则

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

<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 的实现：

<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>