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

相关推荐
FIT2CLOUD飞致云13 小时前
AI智能问数能力全面升级,DataEase开源BI工具v2.10.13 LTS版本发布
开源
FIT2CLOUD飞致云14 小时前
九月月报丨MaxKB在不同规模医疗机构的应用进展汇报
人工智能·开源
Gracemark14 小时前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
算家计算15 小时前
AI配音革命!B站最新开源IndexTTS2本地部署教程:精准对口型,情感随心换
人工智能·开源·aigc
天下无贼15 小时前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
OpenTiny社区16 小时前
OpenTiny NEXT 内核新生:生成式UI × MCP,重塑前端交互新范式!
前端·开源·agent
洋葱头_17 小时前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
奔跑的蜗牛ing17 小时前
Vue3 + Element Plus 输入框省略号插件:零侵入式全局解决方案
vue.js·typescript·前端工程化
幂简集成explinks19 小时前
e签宝签署API更新实战:新增 signType 与 FDA 合规参数配置
后端·设计模式·开源
最后一个农民工19 小时前
vue3实现仿豆包模版式智能输入框
前端·vue.js