VirtualScroll-646e9654.js 3.19 KB
import{d as W,k as $,r as D,e as c,u as r,w as I,o as B,q as k,f as o,a8 as S,_ as M,a9 as P,aa as _,E as N,a0 as g,a1 as V}from"./vue-5a35c3f5.js";import{aF as L,aE as q,_ as C,aj as j}from"./index.js";import{P as U}from"./index-f532aa07.js";import{aA as z}from"./antd-6b087f69.js";import"./useContentViewHeight-d0a5c58e.js";import"./useWindowSizeFn-cc2fb57c.js";import"./onMountedOrActivated-52afb7a7.js";const G={height:[Number,String],maxHeight:[Number,String],maxWidth:[Number,String],minHeight:[Number,String],minWidth:[Number,String],width:[Number,String],bench:{type:[Number,String],default:0},itemHeight:{type:[Number,String],required:!0},items:{type:Array,default:()=>[]}},w="virtual-scroll";function a(t,s="px"){if(!(t==null||t===""))return isNaN(+t)?String(t):`${Number(t)}${s}`}const J=W({name:"VirtualScroll",props:G,setup(t,{slots:s}){const u=$(null),n=D({first:0,last:0,scrollTop:0}),p=c(()=>parseInt(t.bench,10)),m=c(()=>parseInt(t.itemHeight,10)),d=c(()=>Math.max(0,n.first-r(p))),f=c(()=>Math.min((t.items||[]).length,n.last+r(p))),v=c(()=>({height:a((t.items||[]).length*r(m))})),h=c(()=>{const e={},i=a(t.height),l=a(t.minHeight),x=a(t.minWidth),H=a(t.maxHeight),E=a(t.maxWidth),F=a(t.width);return i&&(e.height=i),l&&(e.minHeight=l),x&&(e.minWidth=x),H&&(e.maxHeight=H),E&&(e.maxWidth=E),F&&(e.width=F),e});I([()=>t.itemHeight,()=>t.height],()=>{y()});function b(e){const i=r(u);if(!i)return 0;const l=parseInt(t.height||0,10)||i.clientHeight;return e+Math.ceil(l/r(m))}function A(){return Math.floor(n.scrollTop/r(m))}function y(){const e=r(u);e&&(n.scrollTop=e.scrollTop,n.first=A(),n.last=b(n.first))}function R(){const{items:e=[]}=t;return e.slice(r(d),r(f)).map(T)}function T(e,i){i+=r(d);const l=a(i*r(m));return o("div",{class:`${w}__item`,style:{top:l},key:i},[q(s,"default",{index:i,item:e})])}return B(()=>{n.last=b(0),k(()=>{const e=r(u);e&&L({el:e,name:"scroll",listener:y,wait:0})})}),()=>o("div",{class:w,style:r(h),ref:u},[o("div",{class:`${w}__container`,style:r(v)},[R()])])}});const K=C(J,[["__scopeId","data-v-aba22923"],["__file","E:/allcode/erp/test7901/order-erp-front/src/components/VirtualScroll/src/VirtualScroll.vue"]]),O=j(K),Q=(()=>{const t=[];for(let s=1;s<2e4;s++)t.push({title:"列表项"+s});return t})(),X=W({components:{VScroll:O,Divider:z,PageWrapper:U},setup(){return{data:Q}}});const Y={class:"virtual-scroll-demo-wrap"},Z={class:"virtual-scroll-demo__item"},tt={class:"virtual-scroll-demo-wrap"},et={class:"virtual-scroll-demo__item"};function rt(t,s,u,n,p,m){const d=S("Divider"),f=S("VScroll"),v=S("PageWrapper");return M(),P(v,{class:"virtual-scroll-demo"},{default:_(()=>[o(d,null,{default:_(()=>[N("基础滚动示例")]),_:1}),g("div",Y,[o(f,{itemHeight:41,items:t.data,height:300,width:300},{default:_(({item:h})=>[g("div",Z,V(h.title),1)]),_:1},8,["items"])]),o(d,null,{default:_(()=>[N("即使不可见,也预先加载50条数据,防止空白")]),_:1}),g("div",tt,[o(f,{itemHeight:41,items:t.data,height:300,width:300,bench:50},{default:_(({item:h})=>[g("div",et,V(h.title),1)]),_:1},8,["items"])])]),_:1})}const ut=C(X,[["render",rt],["__scopeId","data-v-b263af6e"],["__file","E:/allcode/erp/test7901/order-erp-front/src/views/demo/comp/scroll/VirtualScroll.vue"]]);export{ut as default};