FcDesigner Pro

Appearance

设计器的事件 ​

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

Vue3

vue
<template>
    <fc-designer @save="handleSave"/>
</template>
<script setup>
    import {onMounted} from "vue";
    const designer = ref(null);
    function handleSave(data) {
        //保存设计规则
    }
</script>
Vue2
vue
<template>
    <fc-designer @save="handleSave"></fc-designer>
</template>
<script>
    export default {
        name: 'Component',
        methods: {
            handleSave(data) {
                //保存设计规则
            }
        }
    };
</script>

事件 ​

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

事件名称描述参数说明
active组件被选中时触发。rule: Rule - 选中组件的规则对象
create创建新组件时触发。rule: Rule - 新创建的组件规则对象
copy组件被复制时触发。rule: Rule - 被复制的组件规则对象
delete组件被删除时触发。rule: Rule - 被删除的组件规则对象
drag拖拽新组件到设计器时触发。e: {item: Object, dragRule: Object, rule: Rule} - 包含拖拽规则和组件信息
inputData录入数据模式下保存数据时触发。查看默认值。formData: Object - 当前录入的表单数据
inputPageData弹窗中保存录入数据时触发。formData: Object - 弹窗中录入的表单数据
save点击保存按钮时触发。查看保存JSON规则。data: {rule: string, options: string} - 包含当前表单规则和配置
clear设计表单被清空时触发。-
changeDevice修改区域显示方式时触发。查看多端适配。-
switchForm切换表单时触发。查看管理表单列表。-
copyRule复制规则时触发。e: {event: Event, rule: Rule} - 包含事件对象和被复制的规则对象
pasteRule粘贴规则时触发。e: {event: Event, copyRule: Rule} - 包含事件对象和被粘贴的规则对象
sortUp组件上移时触发。e: {event: Event, rule: Rule} - 包含事件对象和移动的规则对象
sortDown组件下移时触发。e: {event: Event, rule: Rule} - 包含事件对象和移动的规则对象
previewSubmit预览弹窗中提交表单时触发。formData: Object - 提交的表单数据
api: Object - 表单API对象
previewReset预览弹窗中重置表单时触发。api: Object - 表单API对象
changeField修改组件的字段 ID 时触发。查看管理字段ID。e: {field: string, oldField: string, rule: Rule} - 包含新字段ID、旧字段ID和组件规则
saveField保存字段时触发。查看保存字段。field: string - 保存的字段ID

示例 ​

监听组件 ID 变化 ​

通过监听 changeField 事件，实时获取表单组件ID（field）的变更信息，包括新ID、旧ID和组件规则，以便开发者进行相应的逻辑处理。

vue
<template>
    <fc-designer @changeField="handle"></fc-designer>
</template>
<script>
    export default {
        name: 'Component',
        methods: {
            handle({field, oldField, rule}) {
                // TODO
            }
        }
    };
</script>

监听预览弹窗中表单提交 ​

通过监听 previewSubmit 事件，可以捕获在表单设计器的预览弹窗中提交表单时所产生的数据，从而实现对表单数据的保存或其他自定义处理逻辑。

vue
<template>
    <fc-designer @previewSubmit="handle"></fc-designer>
</template>
<script>
    export default {
        name: 'Component',
        methods: {
            handle(formData, api) {
                console.log('预览提交数据:', formData);
                console.log('表单API:', api);
                // 保存数据
            }
        }
    };
</script>

监听组件创建事件 ​

通过监听 create 事件，可以在用户创建新组件时执行自定义逻辑。

vue
<template>
    <fc-designer @create="handleCreate"></fc-designer>
</template>
<script>
    export default {
        name: 'Component',
        methods: {
            handleCreate(rule) {
                console.log('创建新组件:', rule);
                // 可以在这里添加自定义逻辑，比如记录日志、发送统计等
            }
        }
    };
</script>

监听组件拖拽事件 ​

通过监听 drag 事件，可以在用户拖拽组件到设计器时执行自定义逻辑。

vue
<template>
    <fc-designer @drag="handleDrag"></fc-designer>
</template>
<script>
    export default {
        name: 'Component',
        methods: {
            handleDrag(e) {
                console.log('拖拽的组件:', e.item);
                console.log('拖拽规则:', e.dragRule);
                console.log('规则对象:', e.rule);
                // 可以在这里执行自定义逻辑
            }
        }
    };
</script>

监听组件排序事件 ​

通过监听 sortUp 和 sortDown 事件，可以在用户调整组件顺序时执行自定义逻辑。

vue
<template>
    <fc-designer @sortUp="handleSortUp" @sortDown="handleSortDown"></fc-designer>
</template>
<script>
    export default {
        name: 'Component',
        methods: {
            handleSortUp(e) {
                console.log('组件上移:', e.rule);
                // 处理上移逻辑
            },
            handleSortDown(e) {
                console.log('组件下移:', e.rule);
                // 处理下移逻辑
            }
        }
    };
</script>

监听复制和粘贴事件 ​

通过监听 copyRule 和 pasteRule 事件，可以在用户复制和粘贴组件时执行自定义逻辑。

vue
<template>
    <fc-designer @copyRule="handleCopy" @pasteRule="handlePaste"></fc-designer>
</template>
<script>
    export default {
        name: 'Component',
        methods: {
            handleCopy(e) {
                console.log('复制规则:', e.rule);
                // 处理复制逻辑
            },
            handlePaste(e) {
                console.log('粘贴规则:', e.copyRule);
                // 处理粘贴逻辑
            }
        }
    };
</script>

类型定义 ​

展开
typescript
// 组件操作相关事件
type Active = (rule: Rule) => void;
type Create = (rule: Rule) => void;
type Copy = (rule: Rule) => void;
type Delete = (rule: Rule) => void;
type Drag = (e: { item: Object, dragRule: Object, rule: Rule }) => 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 = (e: { event: Event, rule: Rule }) => void;
type PasteRule = (e: { event: Event, copyRule: Rule }) => void;
type SortUp = (e: { event: Event, rule: Rule }) => void;
type SortDown = (e: { event: Event, rule: Rule }) => void;

// 字段操作相关事件
type ChangeField = (e: { field: string, oldField: string, rule: Rule }) => void;
type SaveField = (field: string) => void;

// 预览相关事件
type PreviewSubmit = (formData: Record<string, Object>, api: Object) => void;
type PreviewReset = (api: Object) => void;