ll-package
Version:
2 lines (1 loc) • 1.58 kB
JavaScript
;Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),l=require("../../../hooks/useTimeout.js"),p=require("../../../hooks/useIntersectionObserver.js");require("../../../../node_modules/ant-design-vue/es/skeleton/index.js");const b=require("../../../../node_modules/ant-design-vue/es/skeleton/Skeleton.js"),y={timeout:{type:Number},viewport:{type:typeof window<"u"?window.HTMLElement:Object,default:()=>null},threshold:{type:String,default:"0px"},direction:{type:String,default:"vertical",validator:t=>["vertical","horizontal"].includes(t)},tag:{type:String,default:"div"},maxWaitingTime:{type:Number,default:80},transitionName:{type:String,default:"lazy-container"}},I=e.defineComponent({name:"LazyContainer",components:{Skeleton:b.default},inheritAttrs:!1,props:y,emits:["init"],setup(t,{emit:f}){const s=e.ref(),i=e.reactive({isInit:!1,loading:!1,intersectionObserverInstance:null});e.onMounted(()=>{d(),m()});function d(){const{timeout:n}=t;n&&l.useTimeoutFn(()=>{r()},n)}function r(){i.loading=!0,l.useTimeoutFn(()=>{i.isInit||(i.isInit=!0,f("init"))},t.maxWaitingTime||80)}function m(){const{timeout:n,direction:v,threshold:a}=t;if(n)return;let o="0px";switch(v){case"vertical":o=`${a} 0px`;break;case"horizontal":o=`0px ${a}`;break}try{const{stop:u,observer:g}=p.useIntersectionObserver({rootMargin:o,target:e.toRef(s.value,"$el"),onIntersect:c=>{(c[0].isIntersecting||c[0].intersectionRatio)&&(r(),g&&u())},root:e.toRef(t,"viewport")})}catch{r()}}return{elRef:s,...e.toRefs(i)}}});exports.default=I;