39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
import { ComponentInstance, onBeforeUnmount, Ref, ref, ShallowRef, watch } from "vue";
|
|
import Intersect, { ObserveDirectiveBinding } from "vuetify/directives/intersect";
|
|
|
|
export const useLazyLoad = (props: { root: Readonly<ShallowRef<ComponentInstance<any>>> }) => {
|
|
const isVisible: Ref<boolean> = ref(false);
|
|
const binding: Ref<ObserveDirectiveBinding | undefined> = ref(undefined);
|
|
|
|
watch(
|
|
props.root,
|
|
(newval: ComponentInstance<any>) => {
|
|
if (newval && !binding.value) {
|
|
const binding: ObserveDirectiveBinding = {
|
|
modifiers: {
|
|
once: false,
|
|
quiet: false,
|
|
},
|
|
value(isIntersecting, entries, observer) {
|
|
isVisible.value = isIntersecting;
|
|
},
|
|
instance: newval,
|
|
oldValue: undefined,
|
|
dir: {},
|
|
};
|
|
Intersect.mounted(newval.$el, binding);
|
|
}
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
|
|
onBeforeUnmount(() => {
|
|
if (binding.value && binding.value.instance) {
|
|
Intersect.unmounted(binding.value.instance.$el, binding.value);
|
|
}
|
|
});
|
|
|
|
return {
|
|
isVisible,
|
|
};
|
|
};
|