<template>
|
<transition-group class="h-full w-full" v-bind="$attrs" ref="elRef" :name="transitionName" :tag="tag" mode="out-in">
|
<div key="component" v-if="isInit">
|
<slot :loading="loading"></slot>
|
</div>
|
<div key="skeleton" v-else>
|
<slot name="skeleton" v-if="$slots.skeleton"></slot>
|
<Skeleton v-else />
|
</div>
|
</transition-group>
|
</template>
|
<script lang="ts">
|
import type { PropType } from 'vue';
|
import { defineComponent, reactive, onMounted, ref, toRef, toRefs } from 'vue';
|
import { Skeleton } from 'ant-design-vue';
|
import { useTimeoutFn } from '/@/hooks/core/useTimeout';
|
import { useIntersectionObserver } from '/@/hooks/event/useIntersectionObserver';
|
|
interface State {
|
isInit: boolean;
|
loading: boolean;
|
intersectionObserverInstance: IntersectionObserver | null;
|
}
|
|
const props = {
|
/**
|
* Waiting time, if the time is specified, whether visible or not, it will be automatically loaded after the specified time
|
*/
|
timeout: { type: Number },
|
/**
|
* The viewport where the component is located.
|
* If the component is scrolling in the page container, the viewport is the container
|
*/
|
viewport: {
|
type: (typeof window !== 'undefined' ? window.HTMLElement : Object) as PropType<HTMLElement>,
|
default: () => null,
|
},
|
/**
|
* Preload threshold, css unit
|
*/
|
threshold: { type: String, default: '0px' },
|
/**
|
* The scroll direction of the viewport, vertical represents the vertical direction, horizontal represents the horizontal direction
|
*/
|
direction: {
|
type: String,
|
default: 'vertical',
|
validator: (v) => ['vertical', 'horizontal'].includes(v),
|
},
|
/**
|
* The label name of the outer container that wraps the component
|
*/
|
tag: { type: String, default: 'div' },
|
maxWaitingTime: { type: Number, default: 80 },
|
/**
|
* transition name
|
*/
|
transitionName: { type: String, default: 'lazy-container' },
|
};
|
|
export default defineComponent({
|
name: 'LazyContainer',
|
components: { Skeleton },
|
inheritAttrs: false,
|
props,
|
emits: ['init'],
|
setup(props, { emit }) {
|
const elRef = ref();
|
const state = reactive<State>({
|
isInit: false,
|
loading: false,
|
intersectionObserverInstance: null,
|
});
|
|
onMounted(() => {
|
immediateInit();
|
initIntersectionObserver();
|
});
|
|
// If there is a set delay time, it will be executed immediately
|
function immediateInit() {
|
const { timeout } = props;
|
timeout &&
|
useTimeoutFn(() => {
|
init();
|
}, timeout);
|
}
|
|
function init() {
|
state.loading = true;
|
|
useTimeoutFn(() => {
|
if (state.isInit) return;
|
state.isInit = true;
|
emit('init');
|
}, props.maxWaitingTime || 80);
|
}
|
|
function initIntersectionObserver() {
|
const { timeout, direction, threshold } = props;
|
if (timeout) return;
|
// According to the scrolling direction to construct the viewport margin, used to load in advance
|
let rootMargin = '0px';
|
switch (direction) {
|
case 'vertical':
|
rootMargin = `${threshold} 0px`;
|
break;
|
case 'horizontal':
|
rootMargin = `0px ${threshold}`;
|
break;
|
}
|
|
try {
|
const { stop, observer } = useIntersectionObserver({
|
rootMargin,
|
target: toRef(elRef.value, '$el'),
|
onIntersect: (entries: any[]) => {
|
const isIntersecting = entries[0].isIntersecting || entries[0].intersectionRatio;
|
if (isIntersecting) {
|
init();
|
if (observer) {
|
stop();
|
}
|
}
|
},
|
root: toRef(props, 'viewport'),
|
});
|
} catch (e) {
|
init();
|
}
|
}
|
return {
|
elRef,
|
...toRefs(state),
|
};
|
},
|
});
|
</script>
|
