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;