diff --git a/packages/vant-use/src/useEventListener/index.ts b/packages/vant-use/src/useEventListener/index.ts index 2eeca23e4..b58e23314 100644 --- a/packages/vant-use/src/useEventListener/index.ts +++ b/packages/vant-use/src/useEventListener/index.ts @@ -1,4 +1,4 @@ -import { Ref, unref, onUnmounted, onDeactivated } from 'vue'; +import { Ref, unref, onUnmounted, onDeactivated, watch } from 'vue'; import { onMountedOrActivated } from '../onMountedOrActivated'; import { inBrowser } from '../utils'; @@ -18,8 +18,10 @@ if (inBrowser) { } catch (e) {} } +type TargetRef = EventTarget | Ref; + export type UseEventListenerOptions = { - target?: EventTarget | Ref; + target?: TargetRef; capture?: boolean; passive?: boolean; }; @@ -37,7 +39,7 @@ export function useEventListener( let attached: boolean; - const add = () => { + const add = (target?: TargetRef) => { const element = unref(target); if (element && !attached) { @@ -50,7 +52,7 @@ export function useEventListener( } }; - const remove = () => { + const remove = (target?: TargetRef) => { const element = unref(target); if (element && attached) { @@ -59,7 +61,12 @@ export function useEventListener( } }; - onUnmounted(remove); - onDeactivated(remove); - onMountedOrActivated(add); + onUnmounted(() => remove(target)); + onDeactivated(() => remove(target)); + onMountedOrActivated(() => add(target)); + + watch(target, (val, oldVal) => { + remove(oldVal); + add(val); + }); }