import{d as C,r as $,d9 as w,h as e,o as l,i as d,j as o,w as n,p as r,W as D,al as I,ed as N,F as f,a9 as c,l as m,A as b,aE as S,H as V,B as E,v as F}from"./index-9PRMimni.js";const L={class:"n-layout-page-header"},T={class:"mt-3 scrollbar-box"},U={class:"mt-3 scrollbar-main"},j={class:"scrollbar-box"},A={class:"mt-3 scrollbar-box"},H={class:"mt-3"},W=C({__name:"scrollbar",setup(q){function y(){const a=[];for(let t=0;t<40;t++)a.push({id:`${t}`,name:"这内容下面可能还有很多个，鼠标放进来使劲的滚动吧"});return a}const _=y(),v=$();function i(a){v.value.scrollTo(0,a)}return(a,t)=>{const k=D,p=I,x=N,u=E,g=V,B=w("scrollBar");return l(),e("div",null,[d("div",L,[o(k,{bordered:!1,title:"滚动场景"},{default:n(()=>t[4]||(t[4]=[r(" 比如，卡片列表，文章列表滚动")])),_:1})]),o(k,{bordered:!1,class:"mt-3 proCard"},{default:n(()=>[o(p,{title:"UI框架内置滚动条",type:"info"},{default:n(()=>t[5]||(t[5]=[r("如果你只是想简单的，实现一个滚动，可以这么写 ")])),_:1}),d("div",T,[o(x,null,{default:n(()=>[(l(!0),e(f,null,c(m(_),s=>(l(),e("p",{key:s.id},b(s.name),1))),128))]),_:1})]),o(p,{class:"mt-3",title:"指令方式",type:"info"},{default:n(()=>t[6]||(t[6]=[r("基于，perfect-scrollbar 使用方式可参考该插件 ")])),_:1}),d("div",U,[S((l(),e("div",j,[(l(!0),e(f,null,c(m(_),s=>(l(),e("p",{key:s.id},b(s.name),1))),128))])),[[B]])]),o(p,{class:"mt-3",title:"UI框架内置滚动条",type:"info"},{default:n(()=>t[7]||(t[7]=[r("演示，函数触发滚动条位置")])),_:1}),d("div",A,[o(x,{ref_key:"scrollbar",ref:v},{default:n(()=>[(l(!0),e(f,null,c(m(_),s=>(l(),e("p",{key:s.id},b(s.name),1))),128))]),_:1},512)]),d("div",H,[o(g,null,{default:n(()=>[o(u,{onClick:t[0]||(t[0]=s=>i(120))},{default:n(()=>t[8]||(t[8]=[r("滚动到120位置")])),_:1}),o(u,{onClick:t[1]||(t[1]=s=>i(900))},{default:n(()=>t[9]||(t[9]=[r("滚动到900位置")])),_:1}),o(u,{onClick:t[2]||(t[2]=s=>i(0))},{default:n(()=>t[10]||(t[10]=[r("滚动到顶部")])),_:1}),o(u,{onClick:t[3]||(t[3]=s=>i(99999))},{default:n(()=>t[11]||(t[11]=[r("滚动到底部")])),_:1})]),_:1})])]),_:1})])}}}),G=F(W,[["__scopeId","data-v-5f07afc4"]]);export{G as default};
