Editor组件 events

props-panel-mounted

• 详情： 编辑器右侧组件属性配置加载完毕后触发

• 事件回调函数： (instance: InstanceType<typeof FormPanel>) => void

  FormPanel.vue 是属性面板组件实例

props-panel-unmounted

• 详情： 编辑器右侧组件属性配置卸载时触发

• 事件回调函数： () => void

update:modelValue

• 详情： 当 modelValue(DSL) 变化时触发，配合 v-model 使用

• 事件回调函数： (value: MApp | null) => void

  查看 MApp 及关联类型定义

  export interface MApp extends MComponent {
    /** App页面类型，app作为整个结构的根节点；有且只有一个 */
    type: NodeType.ROOT;
    /** */
    items: (MPage | MPageFragment)[];
    /** 代码块 */
    codeBlocks?: CodeBlockDSL;
  
    dataSources?: DataSourceSchema[];
  
    dataSourceDeps?: DataSourceDeps;
    dataSourceCondDeps?: DataSourceDeps;
  }

  export interface MComponent {
    /** 组件ID，默认为${type}_${number}}形式, 如：page_123 */
    id: Id;
    /** 组件类型 */
    type?: string;
    /** 组件显示名称 */
    name?: string;
    /** 组件根Dom上的class */
    className?: string;
    /* 关联事件集合 */
    events?: EventConfig[];
    /** 是否隐藏 */
    visible?: boolean;
    /** 显示条件中配置的数据源条件的编译结果 */
    condResult?: boolean;
    /** 组件根Dom的style */
    style?: StyleSchema;
    [NODE_CONDS_KEY]?: DisplayCond[];
    [NODE_CONDS_RESULT_KEY]?: boolean;
    [key: string]: any;
  }

  export enum NodeType {
    /** 容器 */
    CONTAINER = 'container',
    /** 页面 */
    PAGE = 'page',
    /** 根类型 */
    ROOT = 'app',
    /** 页面片 */
    PAGE_FRAGMENT = 'page-fragment',
  }

  export interface MPage extends MContainer {
    /** 页面类型 */
    type: NodeType.PAGE;
  }

  export interface MPageFragment extends MContainer {
    /** 页面类型 */
    type: NodeType.PAGE_FRAGMENT;
  }

  export interface CodeBlockDSL {
    [id: Id]: CodeBlockContent;
  }

  export interface DataSourceSchema {
    /** 数据源类型，根据类型来实例化；例如http则使用new HttpDataSource */
    type: string;
    /** 实体ID */
    id: string;
    /** 实体名称，用于关联时展示 */
    title?: string;
    /** 实体描述，鼠标hover时展示 */
    description?: string;
    /** 字段列表 */
    fields: DataSchema[];
    /** 方法列表 */
    methods: CodeBlockContent[];
    /** mock数据 */
    mocks?: MockSchema[];
    /** 事件 */
    events: EventConfig[];
    /** 不执行init的环境 */
    disabledInitInJsEngine?: (JsEngine | string)[];
    /** 扩展字段 */
    [key: string]: any;
  }

  export interface DataSourceDeps {
    [dataSourceId: string | number]: DepData;
  }

props-form-error

• 详情： 属性表单校验失败时触发

• 事件回调函数： (e: any) => void

props-submit-error

• 详情： 属性表单提交失败时触发

• 事件回调函数： (e: any) => void

  注意：Editor.vue 中该 emit 的类型签名为 [e: any]，运行时通常为 Error 实例（来自 submitForm 抛错），但也可能是 element-plus 校验返回的 invalidFields 结构，业务侧消费时建议先做类型判断

layer-node-dblclick

• 详情： "已选组件"面板中组件树节点被双击时触发

  默认行为（切换可展开节点的展开/收起状态）会先于该事件执行；可通过 beforeLayerNodeDblclick 钩子拦截，返回 false 时该事件不会被触发

• 事件回调函数： (event: MouseEvent, data: TreeNodeData) => void

  查看 TreeNodeData 及关联类型定义

  export interface TreeNodeData {
    id: Id;
    name?: string;
    items?: TreeNodeData[];
    [key: string]: any;
  }

  export type Id = string | number;

• 示例：

<template>
  <m-editor @layer-node-dblclick="onLayerNodeDblclick"></m-editor>
</template>

<script setup>
const onLayerNodeDblclick = (event, data) => {
  console.log('双击节点', data.id, data.type);
};
</script>