vue3-seamless-scroll-modify/dist/vue3-seamless-scroll.min.js

Vue3.0 无缝滚动组件

((e,l)=>{"object"==typeof exports&&"undefined"!=typeof module?l(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],l):l((e="undefined"!=typeof globalThis?globalThis:e||self).Vue3SeamlessScroll={},e.Vue)})(this,(function(e,l){var a={modelValue:{type:Boolean,default:!0},list:{type:Array,required:!0,default:[]},step:{type:Number,default:1},limitScrollNum:{type:Number,default:3},hover:{type:Boolean,default:!1},direction:{type:String,default:"up"},singleHeight:{type:Number,default:0},singleWidth:{type:Number,default:0},singleWaitTime:{type:Number,default:1e3},isRemUnit:{type:Boolean,default:!1},isWatch:{type:Boolean,default:!0},delay:{type:Number,default:0},ease:{type:[String,Object],default:"ease-in"},count:{type:Number,default:-1},copyNum:{type:Number,default:1},wheel:{type:Boolean,default:!1},singleLine:{type:Boolean,default:!1}};function t(e,l={}){e.component(l.name||o.name,o)}globalThis.window.cancelAnimationFrame=globalThis.window.cancelAnimationFrame||globalThis.window.webkitCancelAnimationFrame||globalThis.window.mozCancelAnimationFrame||globalThis.window.oCancelAnimationFrame||globalThis.window.msCancelAnimationFrame||function(e){return globalThis.window.clearTimeout(e)},globalThis.window.requestAnimationFrame=globalThis.window.requestAnimationFrame||globalThis.window.webkitRequestAnimationFrame||globalThis.window.mozRequestAnimationFrame||globalThis.window.oRequestAnimationFrame||globalThis.window.msRequestAnimationFrame||function(e){return globalThis.window.setTimeout(e,1e3/60)};let o=l.defineComponent({name:"vue3-seamless-scroll",inheritAttrs:!1,props:a,emits:["stop","count","move"],setup(e,{slots:a,emit:t,attrs:o}){let u=e,n=l.ref(null),i=l.ref(null),r=l.ref(null),s=l.ref(null),v=l.ref(null),d=l.ref(0),m=l.ref(0),c=l.ref(0),f=l.ref(0),p=l.ref(!1),h=l.ref(0),w=l.computed((()=>!!u.list&&u.list.length>=u.limitScrollNum)),g=l.computed((()=>({width:d.value?d.value+"px":"auto",transform:`translate(${c.value}px,${f.value}px)`,transition:`all ${"string"==typeof u.ease?u.ease:"cubic-bezier("+u.ease.x1+","+u.ease.y1+","+u.ease.x2+","+u.ease.y2+")"} ${u.delay}ms`,overflow:"hidden",display:u.singleLine?"flex":"block"}))),y=l.computed((()=>"left"==u.direction||"right"==u.direction)),b=l.computed((()=>y.value?{float:"left",overflow:"hidden",display:u.singleLine?"flex":"block",flexShrink:u.singleLine?0:1}:{overflow:"hidden"})),T=l.computed((()=>u.isRemUnit?parseInt(globalThis.window.getComputedStyle(globalThis.document.documentElement,null).fontSize):1)),N=l.computed((()=>u.singleWidth*T.value)),A=l.computed((()=>u.singleHeight*T.value)),F=l.computed((()=>{let e;var l=u.step;return 0<(e=(y.value?N:A).value)&&0<e%l&&console.error("如果设置了单步滚动，step 需是单步大小的约数，否则无法保证单步滚动结束的位置是否准确。~~~~~"),l})),V=()=>{cancelAnimationFrame(s.value),s.value=null},x=(e,l,a)=>{s.value=requestAnimationFrame((function(){var o=m.value/2,n=d.value/2;"up"===e?(Math.abs(f.value)>=o&&(f.value=0,h.value+=1,t("count",h.value)),f.value-=l):"down"===e?(0<=f.value&&(f.value=-1*o,h.value+=1,t("count",h.value)),f.value+=l):"left"===e?(Math.abs(c.value)>=n&&(c.value=0,h.value+=1,t("count",h.value)),c.value-=l):"right"===e&&(0<=c.value&&(c.value=-1*n,h.value+=1,t("count",h.value)),c.value+=l),a||(o=u.singleWaitTime,v.value&&clearTimeout(v.value),A.value?Math.abs(f.value)%A.value<l?v.value=setTimeout((()=>{M()}),o):M():N.value&&Math.abs(c.value)%N.value<l?v.value=setTimeout((()=>{M()}),o):M())}))},M=()=>{V(),p.value||!w.value||h.value===u.count?(t("stop",h.value),h.value=0):x(u.direction,F.value,!1)},S=()=>{var e;(e=u.list)&&"boolean"!=typeof e&&100<e.length&&console.warn(`数据达到了${e.length}条有点多哦~,可能会造成部分老旧浏览器卡顿。`),y.value&&(e=2*(e=i.value.offsetWidth)+1,d.value=e),w.value?(m.value=r.value.offsetHeight,u.modelValue&&M()):(V(),f.value=c.value=0)},q=()=>{p.value=!1,M()},W=()=>{p.value=!0,v.value&&clearTimeout(v.value),V()},B=l.computed((()=>u.hover&&u.modelValue&&w.value)),C=function(e,l,a){var t,o,u=void 0!==(o=(a=a||{}).noTrailing)&&o,n=void 0!==(o=a.noLeading)&&o,i=void 0===(o=a.debounceMode)?void 0:o,r=!1,s=0;function v(){t&&clearTimeout(t)}function d(){for(var a=arguments.length,o=new Array(a),d=0;d<a;d++)o[d]=arguments[d];var m=this,c=Date.now()-s;function f(){s=Date.now(),l.apply(m,o)}function p(){t=void 0}r||(n||!i||t||f(),v(),void 0===i&&e<c?n?(s=Date.now(),u||(t=setTimeout(i?p:f,e))):f():!0!==u&&(t=setTimeout(i?p:f,void 0===i?e-c:e)))}return d.cancel=function(e){e=void 0!==(e=(e||{}).upcomingOnly)&&e,v(),r=!e},d}(30,(e=>{V();var l=A.value||15;e.deltaY<0&&x("down",l,!0),0<e.deltaY&&x("up",l,!0)})),R=()=>{V(),p.value=!1,S()};var k;e={Reset:()=>{R()}},(k=l.getCurrentInstance())&&Object.assign(k.proxy,e),l.watch((()=>u.list),(()=>{u.isWatch&&l.nextTick((()=>{R()}))}),{deep:!0}),l.watch((()=>u.modelValue),(e=>{(e?q:W)()})),l.watch((()=>u.count),(e=>{0!==e&&q()})),l.onBeforeMount((()=>{V(),clearTimeout(v.value)})),l.onMounted((()=>{w.value&&S()}));let{default:L,html:$}=a,j=new Array(u.copyNum).fill(null),z=()=>l.createVNode(l.Fragment,null,[l.createVNode("div",{ref:i,style:b.value},[L&&L()]),w.value?j.map((()=>$&&"function"==typeof $?l.createVNode("div",{style:b.value},[$()]):l.createVNode("div",{style:b.value},[L&&L()]))):null]);return()=>l.createVNode("div",{ref:n,class:o.class},[u.wheel&&u.hover?l.createVNode("div",{ref:r,style:g.value,onMouseenter:()=>{B.value&&W()},onMouseleave:()=>{B.value&&q()},onWheel:e=>{B.value&&C(e)}},[z()]):l.createVNode("div",{ref:r,style:g.value,onMouseenter:()=>{B.value&&W()},onMouseleave:()=>{B.value&&q()}},[z()])])}});e.Vue3SeamlessScroll=o,e.default=function(e){e.use(t)},Object.defineProperty(e,"__esModule",{value:!0})}));