| 1 |
- import{d as C,f as T,r as K,c as v,u as n,w as P,o as U,y as q,k as u,a6 as z,Z as A,a4 as G,a5 as d,G as p,$ as _,al as Z,a0 as I}from"./vue-DM5HGU8Z.js";import{P as j}from"./index-C0mnMlct.js";import{a$ as J,aT as O,_ as W,aD as Q}from"./entry/index-CRWhxBeP.js";import{ab as R,aE as X}from"./antd-BfqWtMX3.js";import"./useContentViewHeight-D9So7_ch.js";import"./useWindowSizeFn-CEueHQop.js";import"./onMountedOrActivated-Ckq_czNf.js";const Y={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 h(i,c="px"){if(!(i==null||i===""))return isNaN(+i)?String(i):`${Number(i)}${c}`}const tt=C({name:"VirtualScroll",props:Y,setup(i,{slots:c,expose:g}){const o=T(null),s=K({first:0,last:0,scrollTop:0}),t=v(()=>parseInt(i.bench,10)),m=v(()=>parseInt(i.itemHeight,10)),a=v(()=>Math.max(0,s.first-n(t))),l=v(()=>Math.min((i.items||[]).length,s.last+n(t))),k=v(()=>({height:h((i.items||[]).length*n(m))})),E=v(()=>{const e={},r=h(i.height),f=h(i.minHeight),b=h(i.minWidth),y=h(i.maxHeight),H=h(i.maxWidth),N=h(i.width);return r&&(e.height=r),f&&(e.minHeight=f),b&&(e.minWidth=b),y&&(e.maxHeight=y),H&&(e.maxWidth=H),N&&(e.width=N),e});P([()=>i.itemHeight,()=>i.height],()=>{S()});function x(e){const r=n(o);if(!r)return 0;const f=parseInt(i.height||0,10)||r.clientHeight;return e+Math.ceil(f/n(m))}function V(){return Math.floor(s.scrollTop/n(m))}function S(){const e=n(o);e&&(s.scrollTop=e.scrollTop,s.first=V(),s.last=x(s.first))}function B(){const e=n(o);e&&(e.scrollTop=0)}function M(){const e=n(o);e&&(e.scrollTop=e.scrollHeight)}function D(e){const r=n(o);if(!r)return;const f=e-1>0?e-1:0;r.scrollTop=f*n(m)}function L(){const{items:e=[]}=i;return e.slice(n(a),n(l)).map(F)}function F(e,r){r+=n(a);const f=h(r*n(m));return u("div",{class:`${w}__item`,style:{top:f},key:r},[O(c,"default",{index:r,item:e})])}return g({wrapElRef:o,scrollToTop:B,scrollToItem:D,scrollToBottom:M}),U(()=>{s.last=x(0),q(()=>{const e=n(o);e&&J({el:e,name:"scroll",listener:S,wait:0})})}),()=>u("div",{class:w,style:n(E),ref:o},[u("div",{class:`${w}__container`,style:n(k)},[L()])])}}),et=W(tt,[["__scopeId","data-v-b9753475"]]),$=Q(et),nt={class:"text-center mb-4"},it={class:"virtual-scroll-demo-wrap"},lt={class:"virtual-scroll-demo__item"},rt={class:"virtual-scroll-demo-wrap"},ot={class:"virtual-scroll-demo__item"},st=C({__name:"VirtualScroll",setup(i){const c=T(),g=T(1e3),o=(()=>{const s=[];for(let t=1;t<2e4;t++)s.push({title:"列表项"+t});return s})();return(s,t)=>{const m=z("a-button");return A(),G(n(j),{class:"virtual-scroll-demo"},{default:d(()=>[u(n(R),null,{default:d(()=>t[5]||(t[5]=[p("基础滚动示例")])),_:1}),_("div",nt,[u(m,{onClick:t[0]||(t[0]=a=>{var l;return(l=c.value)==null?void 0:l.scrollToTop()})},{default:d(()=>t[6]||(t[6]=[p("滚动到顶部")])),_:1}),u(m,{onClick:t[1]||(t[1]=a=>{var l;return(l=c.value)==null?void 0:l.scrollToBottom()}),class:"mx-2"},{default:d(()=>t[7]||(t[7]=[p("滚动到底部")])),_:1}),u(m,{onClick:t[4]||(t[4]=a=>{var l;return(l=c.value)==null?void 0:l.scrollToItem(g.value)})},{default:d(()=>[t[8]||(t[8]=p("滚动到第 ")),u(n(X),{value:g.value,"onUpdate:value":t[2]||(t[2]=a=>g.value=a),class:"!w-60px mx-1",min:1,max:n(o).length,precision:0,size:"small",controls:!1,onKeydown:t[3]||(t[3]=Z(a=>{var l;return(l=c.value)==null?void 0:l.scrollToItem(g.value)},["enter"]))},null,8,["value","max"]),t[9]||(t[9]=p(" 条 "))]),_:1})]),_("div",it,[u(n($),{itemHeight:41,items:n(o),height:300,width:300,ref_key:"vScrollRef",ref:c},{default:d(({item:a})=>[_("div",lt,I(a.title),1)]),_:1},8,["items"])]),u(n(R),null,{default:d(()=>t[10]||(t[10]=[p("即使不可见，也预先加载50条数据，防止空白")])),_:1}),_("div",rt,[u(n($),{itemHeight:41,items:n(o),height:300,width:300,bench:50},{default:d(({item:a})=>[_("div",ot,I(a.title),1)]),_:1},8,["items"])])]),_:1})}}}),gt=W(st,[["__scopeId","data-v-836095db"]]);export{gt as default};
|
