mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2026-06-06 07:30:16 +00:00
20 lines
12 KiB
JavaScript
20 lines
12 KiB
JavaScript
import{ax as i,z as s,A as a,b5 as t}from"./chunks/framework.V2ssSR2R.js";const k=JSON.parse('{"title":"EventHelper","description":"","frontmatter":{},"headers":[],"relativePath":"runtime-api/core/eventHelper.md","filePath":"runtime-api/core/eventHelper.md"}'),n={name:"runtime-api/core/eventHelper.md"};function l(d,e,r,h,o,p){return a(),s("div",null,[...e[0]||(e[0]=[t(`<h1 id="eventhelper" tabindex="-1">EventHelper <a class="header-anchor" href="#eventhelper" aria-label="Permalink to “EventHelper”"></a></h1><p><code>EventHelper</code> 是 <code>@tmagic/core</code> 的事件助手类，继承自 <code>EventEmitter</code>，用于管理组件间的事件联动。</p><h2 id="构造函数" tabindex="-1">构造函数 <a class="header-anchor" href="#构造函数" aria-label="Permalink to “构造函数”"></a></h2><div class="language-typescript"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> EventHelper</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(options: EventHelperOptions)</span></span></code></pre></div><h3 id="eventhelperoptions" tabindex="-1">EventHelperOptions <a class="header-anchor" href="#eventhelperoptions" aria-label="Permalink to “EventHelperOptions”"></a></h3><table tabindex="0"><thead><tr><th>参数</th><th>类型</th><th>说明</th></tr></thead><tbody><tr><td><code>app</code></td><td><code>App</code></td><td>应用实例</td></tr><tr><td><code>beforeEventHandler</code></td><td><code>BeforeEventHandler</code></td><td>事件处理前钩子（可选），形如 <code>({ eventConfig, source, args }) => void</code></td></tr><tr><td><code>afterEventHandler</code></td><td><code>AfterEventHandler</code></td><td>事件处理后钩子（可选），形如 <code>({ eventConfig, source, args }) => void</code></td></tr></tbody></table><h2 id="属性" tabindex="-1">属性 <a class="header-anchor" href="#属性" aria-label="Permalink to “属性”"></a></h2><table tabindex="0"><thead><tr><th>属性</th><th>类型</th><th>说明</th></tr></thead><tbody><tr><td><code>app</code></td><td><code>App</code></td><td>应用实例</td></tr><tr><td><code>eventQueue</code></td><td><code>EventCache[]</code></td><td>暂存的待处理事件队列（参见 <code>getEventQueue</code>）</td></tr></tbody></table><h2 id="实例方法" tabindex="-1">实例方法 <a class="header-anchor" href="#实例方法" aria-label="Permalink to “实例方法”"></a></h2><h3 id="initevents" tabindex="-1">initEvents <a class="header-anchor" href="#initevents" aria-label="Permalink to “initEvents”"></a></h3><ul><li><p><strong>返回：</strong></p><ul><li><code>{void}</code></li></ul></li><li><p><strong>详情：</strong></p><p>初始化所有节点的事件。通常在页面加载时调用。</p></li><li><p><strong>示例：</strong></p></li></ul><div class="language-typescript"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">eventHelper.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">initEvents</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span></code></pre></div><h3 id="bindnodeevents" tabindex="-1">bindNodeEvents <a class="header-anchor" href="#bindnodeevents" aria-label="Permalink to “bindNodeEvents”"></a></h3><ul><li><p><strong>参数：</strong></p><ul><li><code>{Node} node</code> 节点实例</li></ul></li><li><p><strong>返回：</strong></p><ul><li><code>{void}</code></li></ul></li><li><p><strong>详情：</strong></p><p>为单个节点绑定事件处理。</p></li><li><p><strong>示例：</strong></p></li></ul><div class="language-typescript"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">eventHelper.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">bindNodeEvents</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(node);</span></span></code></pre></div><h3 id="removenodeevents" tabindex="-1">removeNodeEvents <a class="header-anchor" href="#removenodeevents" aria-label="Permalink to “removeNodeEvents”"></a></h3><ul><li><p><strong>返回：</strong></p><ul><li><code>{void}</code></li></ul></li><li><p><strong>详情：</strong></p><p>移除所有节点的事件绑定。</p></li></ul><h3 id="binddatasourceevents" tabindex="-1">bindDataSourceEvents <a class="header-anchor" href="#binddatasourceevents" aria-label="Permalink to “bindDataSourceEvents”"></a></h3><ul><li><p><strong>返回：</strong></p><ul><li><code>{void}</code></li></ul></li><li><p><strong>详情：</strong></p><p>绑定数据源事件，监听数据源变化并触发相应的组件更新。</p></li></ul><h3 id="removedatasourceevents" tabindex="-1">removeDataSourceEvents <a class="header-anchor" href="#removedatasourceevents" aria-label="Permalink to “removeDataSourceEvents”"></a></h3><ul><li><p><strong>参数：</strong></p><ul><li><code>{DataSource[]} dataSourceList</code> 数据源实例列表（必填）</li></ul></li><li><p><strong>返回：</strong></p><ul><li><code>{void}</code></li></ul></li><li><p><strong>详情：</strong></p><p>移除给定数据源的事件绑定。内部根据已注册的事件名前缀，调用 <code>dataSource.offDataChange</code> 或 <code>dataSource.off</code> 注销监听，并清空 <code>dataSourceEventList</code>。</p></li></ul><h3 id="geteventqueue" tabindex="-1">getEventQueue <a class="header-anchor" href="#geteventqueue" aria-label="Permalink to “getEventQueue”"></a></h3><ul><li><p><strong>返回：</strong></p><ul><li><code>{EventCache[]}</code> 事件缓存项数组，每项形如 <code>{ toId: Id, method: string, fromCpt: any, args: any[], handled?: boolean }</code></li></ul></li><li><p><strong>详情：</strong></p><p>获取当前事件队列。当目标节点尚未挂载时，联动事件会被缓存到此队列；目标节点 <code>mounted</code> 后，会消费匹配项并调用其 <code>instance</code> 上的对应方法。</p></li></ul><h3 id="addeventtoqueue" tabindex="-1">addEventToQueue <a class="header-anchor" href="#addeventtoqueue" aria-label="Permalink to “addEventToQueue”"></a></h3><ul><li><p><strong>参数：</strong></p><ul><li><code>{EventCache} event</code> 事件缓存项，形如 <code>{ toId: Id, method: string, fromCpt: any, args: any[] }</code></li></ul></li><li><p><strong>返回：</strong></p><ul><li><code>{void}</code></li></ul></li><li><p><strong>详情：</strong></p><p>将事件添加到队列中等待处理。</p></li></ul><h3 id="destroy" tabindex="-1">destroy <a class="header-anchor" href="#destroy" aria-label="Permalink to “destroy”"></a></h3><ul><li><p><strong>返回：</strong></p><ul><li><code>{void}</code></li></ul></li><li><p><strong>详情：</strong></p><p>销毁事件助手，清理所有事件绑定。</p></li></ul><h2 id="支持的动作类型" tabindex="-1">支持的动作类型 <a class="header-anchor" href="#支持的动作类型" aria-label="Permalink to “支持的动作类型”"></a></h2><p>EventHelper 支持以下动作类型（ActionType）：</p><table tabindex="0"><thead><tr><th>类型</th><th>说明</th></tr></thead><tbody><tr><td><code>ActionType.COMP</code></td><td>组件动作，调用目标组件的方法</td></tr><tr><td><code>ActionType.CODE</code></td><td>代码块执行</td></tr><tr><td><code>ActionType.DATA_SOURCE</code></td><td>数据源方法调用</td></tr></tbody></table><h3 id="事件配置示例" tabindex="-1">事件配置示例 <a class="header-anchor" href="#事件配置示例" aria-label="Permalink to “事件配置示例”"></a></h3><div class="language-typescript"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> eventConfig</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'click'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> actions: [</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> actionType: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'comp'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> to: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'button_2'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> method: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'show'</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> actionType: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'code'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> codeId: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'code_1'</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> actionType: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'dataSource'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> dataSourceId: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'ds_1'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> methodName: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'fetchData'</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ]</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span></code></pre></div>`,32)])])}const E=i(n,[["render",l]]);export{k as __pageData,E as default};
|