开源 FcDesigner 表单设计器组件事件详解

FcDesigner 是一款基于Vue的开源低代码可视化表单设计器工具,通过数据驱动表单渲染。可以通过拖拽的方式快速创建表单,提高开发者对表单的开发效率,节省开发者的时间。并广泛应用于在政务系统、OA系统、ERP系统、电商系统、流程管理等领域。

源码地址: Github | Gitee | 文档 | 在线演示

组件事件监听方式及事件详情说明

Vue3

html 复制代码
<template>
    <fc-designer @save="handleSave"/>
</template>
<script setup>
    import {onMounted} from "vue";
    const designer = ref(null);
    function handleSave(data) {
        //保存设计规则
    }
</script>

Vue2

html 复制代码
<template>
    <fc-designer @save="handleSave"></fc-designer>
</template>
<script>
    export default {
        name: 'Component',
        methods: {
            handleSave(data) {
                //保存设计规则
            }
        }
    };
</script>

事件

组件事件列表及详细说明:

事件名称 描述 参数说明
active 组件被选中时触发 rule: Rule - 选中组件的规则对象
copy 组件被复制时触发 rule: Rule - 被复制的组件规则对象
delete 组件被删除时触发 rule: Rule - 被删除的组件规则对象
drag 拖拽新组件到设计器时触发 e: Object - 包含拖拽规则和组件信息
inputData 录入数据模式下保存数据时触发 formData: Object - 当前录入的表单数据
inputPageData 弹窗中保存录入数据时触发 formData: Object - 弹窗中录入的表单数据
save 点击保存按钮时触发 data: {rule: string, options: string} - 包含当前表单规则和配置
clear 设计表单被清空时触发 -
changeDevice 修改区域显示方式时触发 -
switchForm 切换表单时触发 -
copyRule 复制规则时触发 rule: Object - 被复制的规则对象
pasteRule 粘贴规则时触发 rule: Object - 被粘贴的规则对象
previewSubmit 预览弹窗中提交表单时触发 formData: Object - 提交的表单数据 api: Object - 表单API对象
previewReset 预览弹窗中重置表单时触发 api: Object - 表单API对象

类型定义

typescript 复制代码
// 组件操作相关事件
type Active = (rule: Rule) => void;
type Copy = (rule: Rule) => void;
type Delete = (rule: Rule) => void;
type Drag = (e: { dragRule: Object, item: Object }) => void;

// 数据操作相关事件
type InputData = (formData: Record<string, Object>) => void;
type InputPageData = (formData: Record<string, Object>) => void;
type Save = (data: { rule: string, options: string }) => void;
type Clear = () => void;

// 界面操作相关事件
type ChangeDevice = () => void;
type SwitchForm = () => void;

// 规则操作相关事件
type CopyRule = (rule: Object) => void;
type PasteRule = (rule: Object) => void;

// 预览相关事件
type PreviewSubmit = (formData: Record<string, Object>, api: Object) => void;
type PreviewReset = (api: Object) => void;
相关推荐
诗书画唱1 分钟前
【前端教程】JavaScript 实现图片鼠标悬停切换效果与==和=的区别
开发语言·前端·javascript
光影少年1 分钟前
前端上传切片优化以及实现
前端·javascript·掘金·金石计划
喜葵11 分钟前
前端安全防护深度实践:从XSS到供应链攻击的全面防御
前端·安全·xss
_r0bin_16 分钟前
分片上传-
前端·javascript·状态模式
东北南西19 分钟前
手写React状态hook
前端·javascript·react.js
诗书画唱20 分钟前
【前端教程】JavaScript DOM 操作实战案例详解
开发语言·前端·javascript
lypzcgf21 分钟前
Coze源码分析-资源库-删除提示词-前端源码
前端·typescript·react·ai应用·coze·coze源码分析·智能体平台
代码青铜22 分钟前
【实战指南】Cursor前端+Zion后端:10分钟打造能收款的AI商业应用MVP
前端·人工智能
群联云防护小杜33 分钟前
服务器异常磁盘写排查手册 · 已删除文件句柄篇
运维·服务器·nginx·开源·lua
quan26311 小时前
Vue实践篇-02,AI生成代码
前端·javascript·vue.js