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

embedded/2024/11/19 10:29:57/

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