refactor(use): adjust useEventListener params

This commit is contained in:
chenjiahan 2020-09-12 21:16:44 +08:00
parent 9b502bcbbd
commit a58da5570b
5 changed files with 24 additions and 36 deletions

View File

@ -24,26 +24,28 @@ if (inBrowser) {
} }
export type UseEventListenerOptions = { export type UseEventListenerOptions = {
type: string; target?: EventTarget | Ref<EventTarget>;
target: EventTarget | Ref<EventTarget>;
capture?: boolean; capture?: boolean;
passive?: boolean; passive?: boolean;
listener: EventListener;
}; };
export function useEventListener({ export function useEventListener(
type, type: string,
target, listener: EventListener,
passive = false, options: UseEventListenerOptions
capture = false, ) {
listener, if (!inBrowser) {
}: UseEventListenerOptions) { return;
}
const { target = window, passive = false, capture = false } = options;
let attached: boolean; let attached: boolean;
const add = () => { const add = () => {
const element = unref(target); const element = unref(target);
if (element && inBrowser && !attached) { if (element && !attached) {
element.addEventListener( element.addEventListener(
type, type,
listener, listener,
@ -56,7 +58,7 @@ export function useEventListener({
const remove = () => { const remove = () => {
const element = unref(target); const element = unref(target);
if (element && inBrowser && attached) { if (element && attached) {
element.removeEventListener(type, listener, capture); element.removeEventListener(type, listener, capture);
attached = false; attached = false;
} }

View File

@ -72,6 +72,12 @@ export default createComponent({
} }
}; };
const onScroll = () => {
if (opened.value) {
updateOffset();
}
};
const toggleItem = (active) => { const toggleItem = (active) => {
children.forEach((item, index) => { children.forEach((item, index) => {
if (index === active) { if (index === active) {
@ -121,15 +127,7 @@ export default createComponent({
callback: onClickOutside, callback: onClickOutside,
}); });
useEventListener({ useEventListener('scroll', onScroll, { target: scroller });
type: 'scroll',
target: scroller,
listener() {
if (opened.value) {
updateOffset();
}
},
});
return () => ( return () => (
<div ref={rootRef} class={bem()}> <div ref={rootRef} class={bem()}>

View File

@ -156,11 +156,7 @@ export default createComponent({
} }
}; };
useEventListener({ useEventListener('scroll', onScroll, { target: scroller });
type: 'scroll',
target: scroller,
listener: onScroll,
});
watch( watch(
() => props.indexList, () => props.indexList,

View File

@ -143,11 +143,7 @@ export default createComponent({
usePublicApi({ check }); usePublicApi({ check });
useEventListener({ useEventListener('scroll', check, { target: scroller });
type: 'scroll',
target: scroller,
listener: check,
});
return () => { return () => {
const Content = slots.default?.(); const Content = slots.default?.();

View File

@ -101,11 +101,7 @@ export default createComponent({
emitScrollEvent(scrollTop); emitScrollEvent(scrollTop);
}; };
useEventListener({ useEventListener('scroll', onScroll, { target: scroller });
type: 'scroll',
target: scroller,
listener: onScroll,
});
useVisibilityChange(rootRef, onScroll); useVisibilityChange(rootRef, onScroll);