zview-plus
Version:
基于 Vue3 的 UI 组件库
2 lines (1 loc) • 3.32 kB
JavaScript
;Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),V=require("./scrollbar.js"),W=require("./scroll-thumb.vue.js"),x={class:"z-scrollbar",ref:"scrollbar"},B={name:"ZScrollbar"},I=e.defineComponent({...B,props:V.ScrollBarProps,emits:["scroll"],setup(z,{expose:y,emit:T}){const t=z,i=(l,u)=>Number(Number(l).toFixed(u)),r=e.ref(null),v=e.ref(null),n=e.ref(null),a=e.ref(Number(parseInt(t.height))),c=e.ref(Number(parseInt(t.maxHeight))),h=e.ref(0),m=e.ref(0),S=e.ref(0),p=e.ref(!1),g=e.ref(0),o=e.ref(0),f=e.ref(0),_=e.ref(!1),w=e.computed(()=>!t.height&&!t.maxHeight?"moveX":"moveY"),H=e.computed(()=>a.value?{height:`${a.value}px`}:{}),L=l=>{n.value.handleDrawScrollVal(l,"moveY"),p.value=!1},N=l=>{n.value.handleDrawScrollVal(l,"moveX"),p.value=!1},s=()=>{const l=w.value==="moveX"?Number(r.value.scrollLeft.toFixed(5)):Number(r.value.scrollTop.toFixed(5));w.value==="moveX"?n.value.setScrollLeft(l):n.value.setScrollTop(l),T("scroll",{scrollTop:r.value.scrollTop,scrollLeft:r.value.scrollLeft})},k=l=>{r.value.scrollTop=l},C=l=>{r.value.scrollLeft=l},b=()=>{var l,u;_.value=!0,h.value=v.value.offsetWidth,m.value=(l=v.value)==null?void 0:l.scrollHeight,S.value=(u=v.value)==null?void 0:u.scrollWidth,o.value=i(a.value*a.value/m.value,0),o.value<=t.minSize&&(o.value=t.minSize),f.value=i(h.value*h.value/S.value,0),f.value<=t.minSize&&(f.value=t.minSize),c.value&&(m.value>=c.value?(a.value=c.value,o.value=i(a.value*a.value/m.value,0),o.value<=t.minSize&&(o.value=t.minSize)):(a.value=0,o.value=0)),g.value=1-(w.value==="moveX"?i(f.value/h.value,2):i(o.value/a.value,2)),_.value=!1};e.watch(()=>t.height,()=>{t.noresize||(a.value=Number(parseInt(t.height)),b(),s())}),e.watch(()=>t.maxHeight,()=>{t.noresize||(c.value=Number(parseInt(t.maxHeight)),a.value=Number(parseInt(t.height))||0,b(),s())});let d=null;return e.onMounted(()=>{var l;b(),(l=r.value)==null||l.addEventListener("scroll",s),t.noresize||(d=new MutationObserver(()=>{b(),s()}),e.nextTick(()=>{d.observe(v.value,{childList:!0,characterData:!0})}))}),e.onUnmounted(()=>{var l;(l=r.value)==null||l.removeEventListener("scroll",s),d==null||d.disconnect()}),y({setScrollTop:L,setScrollLeft:N,wrapRef:r}),(l,u)=>(e.openBlock(),e.createElementBlock("div",x,[e.createElementVNode("div",{class:e.normalizeClass([l.wrapClass,"z-scrollbar__wrap",{native:l.native}]),ref_key:"scrollbar_wrap",ref:r,style:e.normalizeStyle([e.unref(H),l.wrapStyle])},[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(l.tag),{class:e.normalizeClass([l.viewClass,"z-scrollbar__view"]),ref_key:"scrollbar_view",ref:v,style:e.normalizeStyle(l.viewStyle)},{default:e.withCtx(()=>[e.renderSlot(l.$slots,"default")]),_:3},8,["class","style"]))],6),e.createVNode(W.default,{ref_key:"scrollThumb",ref:n,onSetScrollViewTop:k,onSetScrollViewLeft:C,onSetScrollThumb:s,always:l.always,isDraw:p.value,"onUpdate:isDraw":u[0]||(u[0]=D=>p.value=D),height:a.value,maxHeight:c.value,width:h.value,noresize:l.noresize,viewHeight:m.value,viewWidth:S.value,thumbWidth:f.value,native:l.native,move:e.unref(w),retio:g.value,thumbHeight:o.value},null,8,["always","isDraw","height","maxHeight","width","noresize","viewHeight","viewWidth","thumbWidth","native","move","retio","thumbHeight"])],512))}});exports.default=I;