mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
refactor(use): adjust useEventListener params
This commit is contained in:
parent
9b502bcbbd
commit
a58da5570b
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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()}>
|
||||||
|
@ -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,
|
||||||
|
@ -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?.();
|
||||||
|
@ -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);
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user