设计器的事件

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

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 - 当前录入的表单数据
save	点击保存按钮时触发	data: {rule: string, options: string} - 包含当前表单规则和配置
clear	设计表单被清空时触发	-
changeDevice	修改区域显示方式时触发	-
copyRule	复制规则时触发	rule: Object - 被复制的规则对象
pasteRule	粘贴规则时触发	rule: Object - 被粘贴的规则对象

类型定义

展开

// 组件操作相关事件
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;