开源 FcDesigner 表单设计器组件事件详解
FcDesigner 是一款基于Vue的开源低代码可视化表单设计器工具，通过数据驱动表单渲染。可以通过拖拽的方式快速创建表单，提高开发者对表单的开发效率，节省开发者的时间。并广泛应用于在政务系统、OA系统、ERP系统、电商系统、流程管理等领域。
源码地址: Github | Gitee | 文档 | 在线演示
组件事件监听方式及事件详情说明
Vue3
<template><fc-designer @save="handleSave"/>
</template>
<script setup>import {onMounted} from "vue";const designer = ref(null);function handleSave(data) {//保存设计规则}
</script>
Vue2
<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对象 |
类型定义
// 组件操作相关事件
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;