import{ax as i,z as a,A as n,b5 as l}from"./chunks/framework.V2ssSR2R.js";const E=JSON.parse('{"title":"Editor组件 events","description":"","frontmatter":{},"headers":[],"relativePath":"api/editor/events.md","filePath":"api/editor/events.md"}'),h={name:"api/editor/events.md"};function k(t,s,p,e,r,d){return n(),a("div",null,[...s[0]||(s[0]=[l(`
详情: 编辑器右侧组件属性配置加载完毕后触发
事件回调函数: (instance: InstanceType<typeof FormPanel>) => void
FormPanel.vue是属性面板组件实例
详情: 编辑器右侧组件属性配置卸载时触发
事件回调函数: () => void
详情: 当 modelValue(DSL) 变化时触发,配合 v-model 使用
事件回调函数: (value: MApp | null) => void
export interface MApp extends MComponent {
/** App页面类型,app作为整个结构的根节点;有且只有一个 */
type: NodeType.ROOT;
/** */
items: (MPage | MPageFragment)[];
/** 代码块 */
codeBlocks?: CodeBlockDSL;
dataSources?: DataSourceSchema[];
dataSourceDeps?: DataSourceDeps;
dataSourceCondDeps?: DataSourceDeps;
dataSourceMethodDeps?: 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;
}详情: 属性表单校验失败时触发
事件回调函数: (e: any) => void
详情: 属性表单提交失败时触发
事件回调函数: (e: any) => void
注意:Editor.vue 中该 emit 的类型签名为 [e: any],运行时通常为 Error 实例(来自 submitForm 抛错),但也可能是 element-plus 校验返回的 invalidFields 结构,业务侧消费时建议先做类型判断
详情: "已选组件"面板中组件树节点被双击时触发
默认行为(切换可展开节点的展开/收起状态)会先于该事件执行;可通过 beforeLayerNodeDblclick 钩子拦截,返回 false 时该事件不会被触发
事件回调函数: (event: MouseEvent, data: TreeNodeData) => void
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>