cus-scrollbar/dist/cus-scrollbar.umd.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)}})();
(function(n,e){typeof exports=="object"&&typeof module<"u"?module.exports=e(require("vue"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["vue","@vueuse/core"],e):(n=typeof globalThis<"u"?globalThis:n||self,n["cus-scrollbar"]=e(n.Vue,n.VueUse))})(this,function(n,e){"use strict";const z=l=>typeof l=="number",R={noResize:Boolean,always:Boolean,native:Boolean,isOutside:Boolean,quickJump:{type:Boolean,default:!0},barWidth:{type:String,default:"6px"}},V={scroll:(l,m)=>z(l)&&z(m)},P=n.defineComponent({name:"CusScrollbar",__name:"cus-scrollbar",props:{...R},emits:{...V},setup(l,{emit:m}){const s=l,S=m,_=n.ref(),r=n.ref(),W=n.ref(),h=n.ref(),x=n.ref(),d=n.ref();let E;const i={x:0,y:0},v={x:0,y:0},X={x:0,y:0},Y={x:0,y:0},H=n.ref(!1),k=n.ref(!1);s.native||(e.useEventListener(_,"mouseenter",()=>{k.value=!0,C(),O()}),e.useEventListener(_,"mouseleave",()=>{if(!s.always){if(H.value)return;k.value=!1,e.unrefElement(h).style.opacity="0",e.unrefElement(d).style.opacity="0"}})),s.noResize||e.useResizeObserver(r,()=>{C(),O()}),e.useMutationObserver(r,()=>{C(),O()},{attributes:!0,childList:!0,subtree:!0}),e.useEventListener(W,"mousedown",t=>{H.value=!0,v.y=t.clientY,Y.y=e.unrefElement(r).scrollTop,E="thumbY",e.unrefElement(document.body).addEventListener("mousemove",$)}),e.useEventListener(x,"mousedown",t=>{t.stopPropagation(),H.value=!0,v.x=t.clientX,Y.x=e.unrefElement(r).scrollLeft,E="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 o=r.value.getBoundingClientRect();s.always||(t.clientX<0||t.clientY<0||t.clientX<o.left||t.clientX>o.right||t.clientY<o.top||t.clientY>o.bottom)&&(e.unrefElement(h).style.opacity="0",e.unrefElement(d).style.opacity="0")});const O=()=>{if(s.native)return;const t=e.unrefElement(r),o=e.unrefElement(h),a=e.unrefElement(d),f=e.unrefElement(W),c=e.unrefElement(x),{scrollHeight:u,scrollWidth:b,offsetHeight:p,offsetWidth:y}=t;s.always?(b>y&&(a.style.opacity="1"),u>p&&(o.style.opacity="1")):(b>y&&k.value&&(a.style.opacity="1"),u>p&&k.value&&(o.style.opacity="1")),s.isOutside&&(e.unrefElement(d).style.bottom=`-${s.barWidth}`,e.unrefElement(h).style.right=`-${s.barWidth}`),e.unrefElement(d).style.height=s.barWidth,e.unrefElement(h).style.width=s.barWidth;const g=o.offsetHeight,L=a.offsetWidth,B=p*g/u,T=y*L/b;B===g?f.style.opacity="0":(f.style.opacity="0.3",f.style.width=s.barWidth,f.style.height=`${B}px`),T===L?c.style.opacity="0":(c.style.opacity="0.3",c.style.height=s.barWidth,c.style.width=`${T}px`)},C=()=>{if(s.native)return;const t=e.unrefElement(r),o=e.unrefElement(h),a=e.unrefElement(d),f=e.unrefElement(W),c=e.unrefElement(x),{scrollHeight:u,scrollWidth:b,scrollTop:p,scrollLeft:y}=t,g=o.offsetHeight,L=a.offsetWidth,B=p*g/u,T=y*L/b;f.style.top=`${B}px`,c.style.left=`${T}px`};e.useEventListener(r,"scroll",()=>{const t=e.unrefElement(r);C(),S("scroll",t.scrollLeft,t.scrollTop)}),s.quickJump&&(e.useEventListener(h,"click",t=>{E="thumbY",N(t)}),e.useEventListener(d,"click",t=>{E="thumbX",N(t)}));const $=t=>{X.x=t.clientX,X.y=t.clientY,i.x=X.x-v.x,i.y=X.y-v.y;const o=e.unrefElement(r),a=e.unrefElement(h),f=e.unrefElement(d),c=o.scrollHeight,u=o.scrollWidth,b=a.offsetHeight,p=f.offsetWidth;E==="thumbY"?e.unrefElement(r).scrollTop=c*i.y/b+Y.y:E==="thumbX"&&(e.unrefElement(r).scrollLeft=u*i.x/p+Y.x)},N=t=>{if(t.target!==t.currentTarget)return;t.stopPropagation();const o=e.unrefElement(r),a=e.unrefElement(h),f=e.unrefElement(W),c=e.unrefElement(x),u=e.unrefElement(d),b=o.scrollHeight,p=o.scrollWidth,y=a.offsetHeight,g=u.offsetWidth;i.y=t.clientY-a.getBoundingClientRect().top-f.offsetHeight/2,i.x=t.clientX-u.getBoundingClientRect().left-c.offsetWidth/2,i.y=Math.min(Math.max(0,i.y),a.offsetHeight-f.offsetHeight),i.x=Math.min(Math.max(0,i.x),u.offsetWidth-c.offsetWidth),E==="thumbY"?e.unrefElement(r).scrollTo({top:b*i.y/y,behavior:"smooth"}):E==="thumbX"&&e.unrefElement(r).scrollTo({left:p*i.x/g,behavior:"smooth"})};return(t,o)=>(n.openBlock(),n.createElementBlock("div",{ref_key:"scrollContainer",ref:_,class:n.normalizeClass(s.native?"native-scrollbar":"cus-scrollbar")},[n.createElementVNode("div",{ref_key:"wrap",ref:r,class:n.normalizeClass(s.native?"native-scrollbar__wrapper":"cus-scrollbar__wrapper")},[n.renderSlot(t.$slots,"default",{},void 0,!0)],2),s.native?n.createCommentVNode("",!0):(n.openBlock(),n.createElementBlock(n.Fragment,{key:0},[n.createElementVNode("div",{ref_key:"barY",ref:h,class:"cus-scrollbar__bar is-vertical"},[n.createElementVNode("div",{ref_key:"thumbY",ref:W,class:"cus-scrollbar__thumb is-round"},null,512)],512),n.createElementVNode("div",{ref_key:"barX",ref:d,class:"cus-scrollbar__bar is-horizontal"},[n.createElementVNode("div",{ref_key:"thumbX",ref:x,class:"cus-scrollbar__thumb is-round"},null,512)],512)],64))],2))}}),w=((l,m)=>{const s=l.__vccOpts||l;for(const[S,_]of m)s[S]=_;return s})(P,[["__scopeId","data-v-fce116ce"]]),q=function(l){return l.install=function(m){m.component(l.name)||m.component(l.name,l)},l};w.install=function(l){l.component("CusScrollbar",w)};const M={CusScrollbar:q(w)};function F(l){for(const m in M){const s=Reflect.get(M,m);l.use(s)}}return w.install=function(l){F(l)},w});