zview-plus/lib/packages/components/scrollbar/src/scroll-thumb.vue.js

基于 Vue3 的 UI 组件库

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),W=require("./scroll-thumb.js"),N=require("../../../../node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/throttle.js"),k={name:"ZThumb"},D=t.defineComponent({...k,props:W.ScrollThumbProps,emits:["update:isDraw","setScrollViewTop","setScrollViewLeft","setScrollTumb"],setup(b,{expose:g,emit:v}){const e=b,h=t.ref(0),f=t.ref(0),T=o=>{const l=e.viewHeight-a.value,u=o*a.value*e.retio/l;if(u>=n.value)return h.value=n.value;h.value=u},_=o=>{const l=e.viewWidth-r.value,u=o*r.value*e.retio/l;if(u>=n.value)return f.value=n.value;f.value=u},X=o=>{const l=Number(o*e.viewHeight/a.value).toFixed(5);v("setScrollViewTop",l)},S=o=>{const l=Number(o*e.viewWidth/r.value).toFixed(5);v("setScrollViewLeft",l)},d=(o,l)=>{let u=o;o<=0&&(o=0),o>=n.value&&(o=n.value,u=l==="moveX"?r.value:a.value),l==="moveX"?f.value=o:h.value=o,i.value=!0,v("update:isDraw",i.value),l==="moveX"?S(u):X(u)},s=t.ref(null),y=t.ref(null),a=t.ref(Number(parseInt(e.height))),r=t.ref(Number(parseInt(e.width))),n=t.ref(0),m=t.ref(!1),i=t.ref(!1),x=t.computed(()=>e.move==="moveX"?{width:`${e.width}px`}:{height:`${e.height}`}),z=t.computed(()=>e.move==="moveX"?{width:`${e.thumbWidth}px`,left:`${f.value}px`}:{height:`${e.thumbHeight}px`,top:`${h.value}px`}),H=t.computed(()=>e.viewWidth?!e.height&&!e.maxHeight&&e.viewWidth<=r.value:!e.height&&!e.maxHeight);function L(o,l){o.onmousedown=function(u){let p=l==="moveX"?u.pageX-o.offsetLeft:u.pageY-o.offsetTop;return document.onmousemove=N.default(function(w){let V=l==="moveX"?w.pageX-p:w.pageY-p;return d(V,l==="moveX"?"moveX":"moveY"),!1},20),document.onmouseup=function(){return document.onmousemove=null,document.onmouseup=null,document.onmousedown=null,t.nextTick(()=>{i.value=!1,v("update:isDraw",i.value)}),!1},!1}}const c=()=>{m.value||(m.value=!0,r.value=Number(parseInt(e.width)),a.value=Number(parseInt(e.height)),t.nextTick(()=>{n.value=e.move==="moveX"?r.value-s.value.offsetWidth:a.value-s.value.offsetHeight}),m.value=!1)};return t.watch(()=>e.height,()=>{e.noresize||c()}),t.watch(()=>e.viewHeight,()=>{e.noresize||c()}),t.watch(()=>e.width,()=>{e.noresize||c()}),t.watch(()=>e.viewWidth,()=>{e.noresize||c()}),t.onMounted(()=>{L(s.value,e.move==="moveX"?"moveX":"moveY"),c()}),t.onUnmounted(()=>{s.value&&(s.value.onmousedown=null)}),g({setScrollTop:T,setScrollLeft:_,handleDrawScrollVal:d}),(o,l)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"scrollbar_bar",ref:y,class:t.normalizeClass(["z-scrollbar__bar",o.move==="moveX"?"is-horizontal":"is-vertical",{show:i.value},{hide:t.unref(H)},{native:o.native},{always:o.always}]),style:t.normalizeStyle(t.unref(x))},[t.createElementVNode("div",{ref_key:"scrollbar_thumb",ref:s,class:"z-scrollbar__thumb",style:t.normalizeStyle(t.unref(z))},null,4)],6))}});exports.default=D;