mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2026-09-09 23:55:43 +08:00
959c0322b6
resetState 改为原地清空 reactive 对象以保留代理身份，避免 computed 不更新。 编辑器 reset 时同步调用 eventsService.resetState，并补充文档与单测。
249 lines
5.4 KiB
Markdown
249 lines
5.4 KiB
Markdown
# eventsService方法
|
||
|
||
## setEvents
|
||
|
||
- **参数：**
|
||
|
||
- {Record<string, `EventOption`[]>} events 事件配置对象
|
||
|
||
::: details 查看 EventOption 类型定义
|
||
<<< @/../packages/core/src/utils.ts#EventOption{ts}
|
||
:::
|
||
|
||
- **返回：**
|
||
|
||
- `{void}`
|
||
|
||
- **详情：**
|
||
|
||
批量设置多个组件类型的事件列表。增量合并语义：只写入入参中出现的类型，已有的其他类型保持不变。
|
||
|
||
::: tip 切换 runtime 版本
|
||
不同版本的 runtime 事件表不同，直接调用 `setEvents` 会让上一个版本独有的类型残留。是否需要清掉上一个版本的数据由业务自行决定，需要清掉时先调用 [`resetState`](#resetstate) 再写入新表。
|
||
:::
|
||
|
||
- **示例：**
|
||
|
||
```js
|
||
import { eventsService } from '@tmagic/editor';
|
||
|
||
eventsService.setEvents({
|
||
page: [
|
||
{ label: '页面加载', value: 'load' },
|
||
{ label: '页面显示', value: 'show' },
|
||
],
|
||
text: [
|
||
{ label: '点击', value: 'click' },
|
||
],
|
||
});
|
||
```
|
||
|
||
## setEvent
|
||
|
||
- **参数：**
|
||
|
||
- `{string}` type 组件类型
|
||
- {`EventOption`[]} events 事件列表
|
||
|
||
- **返回：**
|
||
|
||
- `{void}`
|
||
|
||
- **详情：**
|
||
|
||
设置指定组件类型的事件列表，只影响该类型
|
||
|
||
- **示例：**
|
||
|
||
```js
|
||
import { eventsService } from '@tmagic/editor';
|
||
|
||
eventsService.setEvent('button', [
|
||
{ label: '点击', value: 'click' },
|
||
{ label: '长按', value: 'longpress' },
|
||
]);
|
||
```
|
||
|
||
## getEvent
|
||
|
||
- **参数：**
|
||
|
||
- `{string}` type 组件类型
|
||
- `{ node?: MNode | null }` data 可选上下文，便于插件按节点定制事件列表（默认 `{}`）
|
||
|
||
- **返回：**
|
||
|
||
- {`EventOption`[]} 事件列表
|
||
|
||
- **详情：**
|
||
|
||
获取指定组件类型的事件列表。默认实现仅按 `type` 返回注册事件；可通过 `usePlugin` 的 `beforeGetEvent` / `afterGetEvent` 读取 `data.node` 做节点级过滤或扩展。
|
||
|
||
- **示例：**
|
||
|
||
```js
|
||
import { eventsService } from '@tmagic/editor';
|
||
|
||
const events = eventsService.getEvent('button', { node });
|
||
console.log(events); // [{ label: '点击', value: 'click' }, ...]
|
||
|
||
// 插件按节点定制
|
||
eventsService.usePlugin({
|
||
afterGetEvent(events, type, data) {
|
||
if (data?.node?.id === 'btn_1') {
|
||
return events.filter((item) => item.value !== 'longpress');
|
||
}
|
||
return events;
|
||
},
|
||
});
|
||
```
|
||
|
||
## setMethods
|
||
|
||
- **参数：**
|
||
|
||
- {Record<string, `EventOption`[]>} methods 方法配置对象
|
||
|
||
- **返回：**
|
||
|
||
- `{void}`
|
||
|
||
- **详情：**
|
||
|
||
批量设置多个组件类型的方法列表。语义与 `setEvents` 一致：增量合并，入参中不存在的类型保持不变。
|
||
|
||
- **示例：**
|
||
|
||
```js
|
||
import { eventsService } from '@tmagic/editor';
|
||
|
||
eventsService.setMethods({
|
||
page: [
|
||
{ label: '刷新', value: 'refresh' },
|
||
{ label: '滚动到顶部', value: 'scrollToTop' },
|
||
],
|
||
video: [
|
||
{ label: '播放', value: 'play' },
|
||
{ label: '暂停', value: 'pause' },
|
||
],
|
||
});
|
||
```
|
||
|
||
## setMethod
|
||
|
||
- **参数：**
|
||
|
||
- `{string}` type 组件类型
|
||
- {`EventOption`[]} methods 方法列表
|
||
|
||
- **返回：**
|
||
|
||
- `{void}`
|
||
|
||
- **详情：**
|
||
|
||
设置指定组件类型的方法列表，只影响该类型
|
||
|
||
- **示例：**
|
||
|
||
```js
|
||
import { eventsService } from '@tmagic/editor';
|
||
|
||
eventsService.setMethod('video', [
|
||
{ label: '播放', value: 'play' },
|
||
{ label: '暂停', value: 'pause' },
|
||
{ label: '停止', value: 'stop' },
|
||
]);
|
||
```
|
||
|
||
## getMethod
|
||
|
||
- **参数：**
|
||
|
||
- `{string}` type 组件类型
|
||
- `{ node?: MNode | null; targetId?: Id }` data 可选上下文（默认 `{}`）
|
||
- `targetId`：目标节点 id
|
||
- `node`：目标节点配置，便于插件按节点定制方法列表
|
||
|
||
- **返回：**
|
||
|
||
- {`EventOption`[]} 方法列表
|
||
|
||
- **详情：**
|
||
|
||
获取指定组件类型的方法列表。默认实现仅按 `type` 返回注册方法；可通过 `usePlugin` 的 `beforeGetMethod` / `afterGetMethod` 读取 `data` 做节点级过滤或扩展。
|
||
|
||
::: warning 破坏性变更
|
||
第二参数已从 `targetId: Id` 调整为对象 `{ node?, targetId? }`。请同步更新调用方与插件钩子入参，例如：
|
||
|
||
```js
|
||
// 旧
|
||
eventsService.getMethod('video', 'video_123');
|
||
// 新
|
||
eventsService.getMethod('video', { targetId: 'video_123', node });
|
||
```
|
||
:::
|
||
|
||
- **示例：**
|
||
|
||
```js
|
||
import { eventsService } from '@tmagic/editor';
|
||
|
||
const methods = eventsService.getMethod('video', { targetId: 'video_123', node });
|
||
console.log(methods); // [{ label: '播放', value: 'play' }, ...]
|
||
|
||
// 插件按节点定制
|
||
eventsService.usePlugin({
|
||
afterGetMethod(methods, type, data) {
|
||
if (data?.targetId === 'video_123') {
|
||
return methods.filter((item) => item.value !== 'stop');
|
||
}
|
||
return methods;
|
||
},
|
||
});
|
||
```
|
||
|
||
## resetState
|
||
|
||
- **参数：** 无
|
||
|
||
- **返回：**
|
||
|
||
- `{void}`
|
||
|
||
- **详情：**
|
||
|
||
重置事件服务状态，清空所有事件和方法配置。`setEvents` / `setMethods` 是增量合并，切换 runtime 版本这类需要丢弃上一份事件表的场景，由业务在写入新表前自行调用本方法。
|
||
|
||
- **示例：**
|
||
|
||
```js
|
||
import { eventsService } from '@tmagic/editor';
|
||
|
||
// 切到另一个版本的 runtime：先清空，再写入该版本的事件表
|
||
eventsService.resetState();
|
||
eventsService.setEvents(nextVersionEvents);
|
||
eventsService.setMethods(nextVersionMethods);
|
||
```
|
||
|
||
## destroy
|
||
|
||
- **参数：** 无
|
||
|
||
- **返回：**
|
||
|
||
- `{void}`
|
||
|
||
- **详情：**
|
||
|
||
销毁 eventsService，重置状态并移除所有事件监听和插件
|
||
|
||
- **示例：**
|
||
|
||
```js
|
||
import { eventsService } from '@tmagic/editor';
|
||
|
||
eventsService.destroy();
|
||
```
|
||
|