cus-scrollbar/dist/cus-scrollbar.cjs.js

适用于vue3的组件CusScrollbar

(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".cus-scrollbar[data-v-fce116ce]{position:relative}.cus-scrollbar__wrapper[data-v-fce116ce]{height:100%;width:100%;overflow:auto;scrollbar-width:none}.cus-scrollbar__wrapper[data-v-fce116ce]::-webkit-scrollbar{width:0}.native-scrollbar__wrapper[data-v-fce116ce]{height:100%;width:100%;overflow:auto}.cus-scrollbar__bar[data-v-fce116ce]{position:absolute;opacity:0;background-color:#0000;transition:all .3s ease;user-select:none;-webkit-user-select:none;-moz-user-select:none;transition:all .3s}.cus-scrollbar__bar.is-vertical[data-v-fce116ce]{width:6px;height:100%;right:0;top:0;z-index:999}.cus-scrollbar__bar.is-horizontal[data-v-fce116ce]{width:100%;height:6px;bottom:0;left:0;z-index:999}.cus-scrollbar__thumb[data-v-fce116ce]{position:relative;display:block;width:0;height:0;border-radius:inherit;background-color:#909399;opacity:.3;cursor:pointer}.is-round[data-v-fce116ce],.is-round[data-v-fce116ce]:after,.is-round[data-v-fce116ce]:before{border-radius:9999px!important}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
"use strict";const s=require("vue"),e=require("@vueuse/core"),M=o=>typeof o=="number",R={noResize:Boolean,always:Boolean,native:Boolean,isOutside:Boolean,quickJump:{type:Boolean,default:!0},barWidth:{type:String,default:"6px"}},P={scroll:(o,m)=>M(o)&&M(m)},V=s.defineComponent({name:"CusScrollbar",__name:"cus-scrollbar",props:{...R},emits:{...P},setup(o,{emit:m}){const n=o,S=m,v=s.ref(),l=s.ref(),w=s.ref(),h=s.ref(),W=s.ref(),b=s.ref();let p;const i={x:0,y:0},x={x:0,y:0},X={x:0,y:0},Y={x:0,y:0},H=s.ref(!1),k=s.ref(!1);n.native||(e.useEventListener(v,"mouseenter",()=>{k.value=!0,C(),T()}),e.useEventListener(v,"mouseleave",()=>{if(!n.always){if(H.value)return;k.value=!1,e.unrefElement(h).style.opacity="0",e.unrefElement(b).style.opacity="0"}})),n.noResize||e.useResizeObserver(l,()=>{C(),T()}),e.useMutationObserver(l,()=>{C(),T()},{attributes:!0,childList:!0,subtree:!0}),e.useEventListener(w,"mousedown",t=>{H.value=!0,x.y=t.clientY,Y.y=e.unrefElement(l).scrollTop,p="thumbY",e.unrefElement(document.body).addEventListener("mousemove",$)}),e.useEventListener(W,"mousedown",t=>{t.stopPropagation(),H.value=!0,x.x=t.clientX,Y.x=e.unrefElement(l).scrollLeft,p="thumbX",e.unrefElement(document.body).addEventListener("mousemove",$)}),e.useEventListener(document.body,"mouseup",t=>{t.stopPropagation(),H.value=!1,e.unrefElement(document.body).removeEventListener("mousemove",$);const r=l.value.getBoundingClientRect();n.always||(t.clientX<0||t.clientY<0||t.clientX<r.left||t.clientX>r.right||t.clientY<r.top||t.clientY>r.bottom)&&(e.unrefElement(h).style.opacity="0",e.unrefElement(b).style.opacity="0")});const T=()=>{if(n.native)return;const t=e.unrefElement(l),r=e.unrefElement(h),c=e.unrefElement(b),a=e.unrefElement(w),u=e.unrefElement(W),{scrollHeight:f,scrollWidth:d,offsetHeight:E,offsetWidth:y}=t;n.always?(d>y&&(c.style.opacity="1"),f>E&&(r.style.opacity="1")):(d>y&&k.value&&(c.style.opacity="1"),f>E&&k.value&&(r.style.opacity="1")),n.isOutside&&(e.unrefElement(b).style.bottom=`-${n.barWidth}`,e.unrefElement(h).style.right=`-${n.barWidth}`),e.unrefElement(b).style.height=n.barWidth,e.unrefElement(h).style.width=n.barWidth;const g=r.offsetHeight,L=c.offsetWidth,B=E*g/f,O=y*L/d;B===g?a.style.opacity="0":(a.style.opacity="0.3",a.style.width=n.barWidth,a.style.height=`${B}px`),O===L?u.style.opacity="0":(u.style.opacity="0.3",u.style.height=n.barWidth,u.style.width=`${O}px`)},C=()=>{if(n.native)return;const t=e.unrefElement(l),r=e.unrefElement(h),c=e.unrefElement(b),a=e.unrefElement(w),u=e.unrefElement(W),{scrollHeight:f,scrollWidth:d,scrollTop:E,scrollLeft:y}=t,g=r.offsetHeight,L=c.offsetWidth,B=E*g/f,O=y*L/d;a.style.top=`${B}px`,u.style.left=`${O}px`};e.useEventListener(l,"scroll",()=>{const t=e.unrefElement(l);C(),S("scroll",t.scrollLeft,t.scrollTop)}),n.quickJump&&(e.useEventListener(h,"click",t=>{p="thumbY",z(t)}),e.useEventListener(b,"click",t=>{p="thumbX",z(t)}));const $=t=>{X.x=t.clientX,X.y=t.clientY,i.x=X.x-x.x,i.y=X.y-x.y;const r=e.unrefElement(l),c=e.unrefElement(h),a=e.unrefElement(b),u=r.scrollHeight,f=r.scrollWidth,d=c.offsetHeight,E=a.offsetWidth;p==="thumbY"?e.unrefElement(l).scrollTop=u*i.y/d+Y.y:p==="thumbX"&&(e.unrefElement(l).scrollLeft=f*i.x/E+Y.x)},z=t=>{if(t.target!==t.currentTarget)return;t.stopPropagation();const r=e.unrefElement(l),c=e.unrefElement(h),a=e.unrefElement(w),u=e.unrefElement(W),f=e.unrefElement(b),d=r.scrollHeight,E=r.scrollWidth,y=c.offsetHeight,g=f.offsetWidth;i.y=t.clientY-c.getBoundingClientRect().top-a.offsetHeight/2,i.x=t.clientX-f.getBoundingClientRect().left-u.offsetWidth/2,i.y=Math.min(Math.max(0,i.y),c.offsetHeight-a.offsetHeight),i.x=Math.min(Math.max(0,i.x),f.offsetWidth-u.offsetWidth),p==="thumbY"?e.unrefElement(l).scrollTo({top:d*i.y/y,behavior:"smooth"}):p==="thumbX"&&e.unrefElement(l).scrollTo({left:E*i.x/g,behavior:"smooth"})};return(t,r)=>(s.openBlock(),s.createElementBlock("div",{ref_key:"scrollContainer",ref:v,class:s.normalizeClass(n.native?"native-scrollbar":"cus-scrollbar")},[s.createElementVNode("div",{ref_key:"wrap",ref:l,class:s.normalizeClass(n.native?"native-scrollbar__wrapper":"cus-scrollbar__wrapper")},[s.renderSlot(t.$slots,"default",{},void 0,!0)],2),n.native?s.createCommentVNode("",!0):(s.openBlock(),s.createElementBlock(s.Fragment,{key:0},[s.createElementVNode("div",{ref_key:"barY",ref:h,class:"cus-scrollbar__bar is-vertical"},[s.createElementVNode("div",{ref_key:"thumbY",ref:w,class:"cus-scrollbar__thumb is-round"},null,512)],512),s.createElementVNode("div",{ref_key:"barX",ref:b,class:"cus-scrollbar__bar is-horizontal"},[s.createElementVNode("div",{ref_key:"thumbX",ref:W,class:"cus-scrollbar__thumb is-round"},null,512)],512)],64))],2))}}),q=(o,m)=>{const n=o.__vccOpts||o;for(const[S,v]of m)n[S]=v;return n},_=q(V,[["__scopeId","data-v-fce116ce"]]),F=function(o){return o.install=function(m){m.component(o.name)||m.component(o.name,o)},o};_.install=function(o){o.component("CusScrollbar",_)};const I=F(_),N={CusScrollbar:I};function J(o){for(const m in N){const n=Reflect.get(N,m);o.use(n)}}_.install=function(o){J(o)};module.exports=_;