useEmitter

统一管理目标对象的事件监听，并在组件卸载时自动清理监听。

@movk-repo/shared/hooks/useEmitter

参数

function useEmitter<R extends EventRegistry>(
  target: ShallowRef<EmitterTarget | undefined>,
  emit: EmitFunction,
  events?: EventInput<R>[],
): (() => void)[]

target

事件监听目标。

• 类型: ShallowRef<EmitterTarget | undefined>
• 描述: 事件监听器将被附加到此目标上。

emit

用于发射事件的函数。

• 类型: EmitFunction
• 描述: 接受事件名称及额外参数（例如将 "x.y" 转换为 "xY"）。

events

可选的事件配置数组，每个事件可以为字符串或对象形式。

• 类型: EventInput<R>[]
• 描述:
  • 字符串形式表示事件名称；
  • 对象形式包含：
    • eventName: 事件名称
    • handler: 自定义回调函数（可选）
    • additionalArgs: 附加参数数组（可选）

示例

import { useEmitter } from '@movk-repo/shared'
import { ref } from 'vue'

// 假设 target 实现了 on 和 off 方法
const targetRef = ref({
  on: (...args: any[]) => { /* 绑定事件 */ },
  off: (...args: any[]) => { /* 移除事件 */ },
})

function emitEvent(eventName: string, ...args: any[]) {
  console.log(`事件: ${eventName}`, ...args)
}

const cleanupFns = useEmitter(targetRef, emitEvent, [
  'click',
  {
    eventName: 'hover',
    handler: event => console.log('hover event', event),
    additionalArgs: ['arg1', 'arg2'],
  },
])

// cleanupFns 数组中的函数可用于手动解绑事件