vue3-virtual-list-ts/dist/lib.umd.js

A virtual list component based on vue3 + ts

(function(e,c){typeof exports=="object"&&typeof module<"u"?module.exports=c(require("vue")):typeof define=="function"&&define.amd?define(["vue"],c):(e=typeof globalThis<"u"?globalThis:e||self,e.lib=c(e.Vue))})(this,function(e){"use strict";var c=document.createElement("style");c.textContent=`.vitrual-list-container[data-v-b59aa89d]{width:100%;height:100%;min-width:100px;min-height:100px;overflow-y:scroll}.vitrual-list-scroll-list[data-v-b59aa89d]{box-sizing:border-box}.vitrual-list-scroll-item[data-v-b59aa89d]{overflow:hidden}.vitrual-list-loading[data-v-b59aa89d]{text-align:center;color:#ccc}
`,document.head.appendChild(c);const _=e.defineComponent({name:"virtualList",props:{data:{type:Array,default:()=>[]},dataKey:{type:String,default:"id"},showLoading:{type:Boolean,default:!0},itemHeight:{type:Number,default:40},dataBuffer:{type:Number,default:50},onCompelete:{type:Function,default:null}},setup(t){const{data:l,dataBuffer:n,itemHeight:o,onCompelete:s}=e.toRefs(t),r=e.ref(null),u=e.ref(0),i=e.ref([]),p=e.ref(0),g=e.ref(0);let a={startIndex:0,endIndex:0},m=!1,h=!1;const w=window.requestAnimationFrame,E=()=>{m||(v(),w(()=>f()()()()))},f=()=>{var d;return a.startIndex=r.value?~~(((d=r==null?void 0:r.value)==null?void 0:d.scrollTop)/(o==null?void 0:o.value))-(n==null?void 0:n.value)/2:0,a.startIndex=Math.max(a.startIndex,0),a.endIndex=a.startIndex+u.value+(n==null?void 0:n.value),a.endIndex=Math.min(l.value.length-1,a.endIndex),()=>C()},C=()=>(i.value=l.value.slice(a.startIndex,a.endIndex).map((d,V)=>({...d,__index__:V+a.startIndex})),()=>L()),v=()=>(m=!m,B()),L=()=>(p.value=a.startIndex*o.value,()=>v()),y=()=>g.value=l.value.length*o.value,B=()=>{var d;if(a.startIndex+u.value+(n==null?void 0:n.value)/2>l.value.length-1&&!h)return D(),console.log(s),(d=s==null?void 0:s.value)==null?void 0:d.call(s)},$=()=>{u.value=r.value?Math.ceil(r.value.clientHeight/o.value)+1:0},D=()=>h=!h;return e.watch(t,()=>{y(),h=!1}),e.onMounted(()=>(y(),$(),f()()())),{handleScroll:E,paddingTop:p,containerHeight:g,showDataList:i,vitrualListContainer:r}}}),F="",x=(t,l)=>{const n=t.__vccOpts||t;for(const[o,s]of l)n[o]=s;return n},I=t=>(e.pushScopeId("data-v-b59aa89d"),t=t(),e.popScopeId(),t),S={key:0},k=I(()=>e.createElementVNode("div",{class:"vitrual-list-loading"},[e.createElementVNode("span",null,"\u6B63\u5728\u52AA\u529B\u52A0\u8F7D\u4E2D\uFF5E")],-1));function b(t,l,n,o,s,r){var u;return e.openBlock(),e.createElementBlock("div",{ref:"vitrualListContainer",onScrollPassive:l[0]||(l[0]=(...i)=>t.handleScroll&&t.handleScroll(...i)),class:"vitrual-list-container"},[(u=t.data)!=null&&u.length?(e.openBlock(),e.createElementBlock("div",{key:0,class:"vitrual-list-scroll-list",style:e.normalizeStyle(`
        padding-top: ${t.paddingTop}px;
        height: ${t.containerHeight}px;
      `)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.showDataList,(i,p)=>(e.openBlock(),e.createElementBlock("div",{key:i[t.dataKey],class:"vitrual-list-scroll-item",style:e.normalizeStyle(`height: ${t.itemHeight}px`)},[e.renderSlot(t.$slots,"default",{item:i,index:p},void 0,!0)],4))),128)),t.showLoading?(e.openBlock(),e.createElementBlock("div",S,[e.renderSlot(t.$slots,"loading",{},()=>[k],!0)])):e.createCommentVNode("",!0)],4)):e.createCommentVNode("",!0)],544)}return{VirtualList:x(_,[["render",b],["__scopeId","data-v-b59aa89d"]])}});