You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2 lines
5.3 KiB
2 lines
5.3 KiB
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).Vue3SeamlessScroll={},e.Vue)}(this,(function(e,t){"use strict";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)};var l=t.defineComponent({name:"Vue3SeamlessScroll",props:{modelValue:{type:Boolean,default:!0},list:{type:Array,required:!0},step:{type:Number,default:1},limitScrollNum:{type:Number,default:5},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}},setup(e,{slots:l,emit:o}){var a=t.ref(null);const i=t.ref(null),n=t.ref(null),u=t.ref(null!=l.html),s=t.ref(""),r=t.ref(0),m=t.reactive({xPos:0,yPos:0,reqFrame:null,singleWaitTimeout:null,realBoxWidth:0,realBoxHeight:0,isHover:!1});var c=t.computed((()=>({width:m.realBoxWidth?`${m.realBoxWidth}px`:"auto",transform:`translate(${m.xPos}px,${m.yPos}px)`,transition:`all ${"string"==typeof e.ease?e.ease:"cubic-bezier("+e.ease.x1+","+e.ease.y1+","+e.ease.x2+","+e.ease.y2+")"} ${e.delay}ms`,overflow:"hidden"})));const d=t.computed((()=>"left"==e.direction||"right"==e.direction));l=t.computed((()=>d.value?{float:"left",overflow:"hidden"}:{overflow:"hidden"}));const f=t.computed((()=>e.list.length>=e.limitScrollNum)),v=t.computed((()=>e.isRemUnit?parseInt(globalThis.window.getComputedStyle(globalThis.document.documentElement,null).fontSize):1)),h=t.computed((()=>e.singleWidth*v.value)),p=t.computed((()=>e.singleHeight*v.value)),g=t.computed((()=>e.hover&&e.modelValue&&f.value)),y=t.computed((()=>{let t;var l=e.step;return t=(d.value?h:p).value,0<t&&0<t%l&&console.error("如果设置了单步滚动,step需是单步大小的约数,否则无法保证单步滚动结束的位置是否准确。~~~~~"),l}));function w(){cancelAnimationFrame(m.reqFrame||""),m.reqFrame=null}function T(){if(w(),m.isHover||!f.value||r.value===e.count)return o("stop",r.value),void(r.value=0);m.reqFrame=requestAnimationFrame((function(){var t=m.realBoxHeight/2,l=m.realBoxWidth/2,{direction:a,singleWaitTime:i}=e;"up"===a?(Math.abs(m.yPos)>=t&&(m.yPos=0,r.value+=1,o("count",r.value)),m.yPos-=y.value):"down"===a?(0<=m.yPos&&(m.yPos=-1*t,r.value+=1,o("count",r.value)),m.yPos+=y.value):"left"===a?(Math.abs(m.xPos)>=l&&(m.xPos=0,r.value+=1,o("count",r.value)),m.xPos-=y.value):"right"===a&&(0<=m.xPos&&(m.xPos=-1*l,r.value+=1,o("count",r.value)),m.xPos+=y.value),m.singleWaitTimeout&&clearTimeout(m.singleWaitTimeout),p.value?Math.abs(m.yPos)%p.value<y.value?m.singleWaitTimeout=setTimeout((()=>{T()}),i):T():h.value&&Math.abs(m.xPos)%h.value<y.value?m.singleWaitTimeout=setTimeout((()=>{T()}),i):T()}))}function b(){t.nextTick((()=>{var l;"boolean"!=typeof(l=e.list)&&100<l.length&&console.warn(`数据达到了${l.length}条有点多哦~,可能会造成部分老旧浏览器卡顿。`),s.value="",d.value&&(l=2*(l=i.value.offsetWidth)+1,m.realBoxWidth=l),f.value?u.value?(m.realBoxHeight=n.value.offsetHeight,e.modelValue&&T()):(s.value=i.value.innerHTML,t.nextTick((()=>{m.realBoxHeight=n.value.offsetHeight,e.modelValue&&T()}))):(w(),m.yPos=m.xPos=0)}))}function x(){m.isHover=!1,T()}function S(){m.isHover=!0,m.singleWaitTimeout&&clearTimeout(m.singleWaitTimeout),w()}return t.watch((()=>e.list),(()=>{e.isWatch&&(w(),m.isHover=!1,b())}),{deep:!0}),t.watch((()=>e.modelValue),(e=>{(e?x:S)()})),t.watch((()=>e.count),(e=>{0!==e&&x()})),t.onBeforeMount((()=>{w(),clearTimeout(m.singleWaitTimeout)})),t.onMounted((()=>{b()})),{scrollRef:a,slotListRef:i,realBoxRef:n,realBoxStyle:c,floatStyle:l,isScroll:f,slotHtml:u,scrollHtml:s,enter:function(){g.value&&S()},leave:function(){g.value&&x()}}}});const o={ref:"scrollRef"};function a(e,t={}){e.component(t.name||l.name,l)}l.render=function(e,l,a,i,n,u){return t.openBlock(),t.createBlock("div",o,[t.createVNode("div",{ref:"realBoxRef",style:e.realBoxStyle,onMouseenter:l[1]||(l[1]=(...t)=>e.enter(...t)),onMouseleave:l[2]||(l[2]=(...t)=>e.leave(...t))},[t.createVNode("div",{ref:"slotListRef",style:e.floatStyle},[t.renderSlot(e.$slots,"default")],4),e.slotHtml&&e.isScroll?(t.openBlock(),t.createBlock("div",{key:0,style:e.floatStyle},[t.renderSlot(e.$slots,"html")],4)):!e.slotHtml&&e.isScroll?(t.openBlock(),t.createBlock("div",{key:1,innerHTML:e.scrollHtml,style:e.floatStyle},null,12,["innerHTML"])):t.createCommentVNode("v-if",!0)],36)],512)},l.__file="src/component/Vue3SeamlessScroll.vue",e.Vue3SeamlessScroll=l,e.default=function(e){e.use(a)},Object.defineProperty(e,"__esModule",{value:!0})}));
|