vue3-seamless-scroll/lib/vue3SeamlessScroll.umd.min.js

Vue3.0 无缝滚动组件

(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("vue")):"function"===typeof define&&define.amd?define([],t):"object"===typeof exports?exports["vue3SeamlessScroll"]=t(require("vue")):e["vue3SeamlessScroll"]=t(e["Vue"])})("undefined"!==typeof self?self:this,(function(e){return function(e){var t={};function o(n){if(t[n])return t[n].exports;var r=t[n]={i:n,l:!1,exports:{}};return e[n].call(r.exports,r,r.exports,o),r.l=!0,r.exports}return o.m=e,o.c=t,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},o.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)o.d(n,r,function(t){return e[t]}.bind(null,r));return n},o.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o(o.s="fb15")}({"38a8":function(e,t,o){"use strict";o("42e9")},"42e9":function(e,t,o){},8875:function(e,t,o){var n,r,l;(function(o,a){r=[],n=a,l="function"===typeof n?n.apply(t,r):n,void 0===l||(e.exports=l)})("undefined"!==typeof self&&self,(function(){function e(){var t=Object.getOwnPropertyDescriptor(document,"currentScript");if(!t&&"currentScript"in document&&document.currentScript)return document.currentScript;if(t&&t.get!==e&&document.currentScript)return document.currentScript;try{throw new Error}catch(m){var o,n,r,l=/.*at [^(]*\((.*):(.+):(.+)\)$/gi,a=/@([^@]*):(\d+):(\d+)\s*$/gi,i=l.exec(m.stack)||a.exec(m.stack),c=i&&i[1]||!1,u=i&&i[2]||!1,s=document.location.href.replace(document.location.hash,""),d=document.getElementsByTagName("script");c===s&&(o=document.documentElement.outerHTML,n=new RegExp("(?:[^\\n]+?\\n){0,"+(u-2)+"}[^<]*<script>([\\d\\D]*?)<\\/script>[\\d\\D]*","i"),r=o.replace(n,"$1").trim());for(var f=0;f<d.length;f++){if("interactive"===d[f].readyState)return d[f];if(d[f].src===c)return d[f];if(c===s&&d[f].innerHTML&&d[f].innerHTML.trim()===r)return d[f]}return null}}return e}))},"8bbf":function(t,o){t.exports=e},fb15:function(e,t,o){"use strict";if(o.r(t),o.d(t,"jsSeamlessScroll",(function(){return m})),o.d(t,"cssSeamlessScroll",(function(){return S})),"undefined"!==typeof window){var n=window.document.currentScript,r=o("8875");n=r(),"currentScript"in document||Object.defineProperty(document,"currentScript",{get:r});var l=n&&n.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);l&&(o.p=l[1])}var a=o("8bbf");const i={ref:"scrollRef"};function c(e,t,o,n,r,l){return Object(a["openBlock"])(),Object(a["createBlock"])("div",i,[Object(a["createVNode"])("div",{ref:"realBoxRef",style:e.realBoxStyle,onMouseenter:t[1]||(t[1]=(...t)=>e.enter(...t)),onMouseleave:t[2]||(t[2]=(...t)=>e.leave(...t))},[Object(a["createVNode"])("div",{ref:"slotListRef",style:e.floatStyle},[Object(a["renderSlot"])(e.$slots,"default")],4),e.slotHtml&&e.isScroll?(Object(a["openBlock"])(),Object(a["createBlock"])("div",{key:0,style:e.floatStyle},[Object(a["renderSlot"])(e.$slots,"html")],4)):!e.slotHtml&&e.isScroll?(Object(a["openBlock"])(),Object(a["createBlock"])("div",{key:1,innerHTML:e.scrollHtml,style:e.floatStyle},null,12,["innerHTML"])):Object(a["createCommentVNode"])("",!0)],36)],512)}function u(e){e.length>100&&console.warn(`数据达到了${e.length}条有点多哦~,可能会造成部分老旧浏览器卡顿。`)}function s(e){return isNaN(e)?(console.warn("Must be in number format"),"0"):e+""}window.cancelAnimationFrame=function(){return window.cancelAnimationFrame||window.webkitCancelAnimationFrame||window.mozCancelAnimationFrame||window.oCancelAnimationFrame||window.msCancelAnimationFrame||function(e){return window.clearTimeout(e)}}(),window.requestAnimationFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(e){return window.setTimeout(e,1e3/60)}}();var d=Object(a["defineComponent"])({name:"js-seamless-scroll",props:{datas:{type:Array,required:!0},step:{type:[Number,String],default:1,validator:s},limitScrollNum:{type:[Number,String],default:5,validator:s},hover:{type:Boolean,default:!1},direction:{type:String,default:"up"},singleHeight:{type:[Number,String],default:0,validator:s},singleWidth:{type:[Number,String],default:0,validator:s},singleWaitTime:{type:[Number,String],default:1e3,validator:s},autoPlay:{type:Boolean,default:!0},isRemUnit:{type:Boolean,default:!1},isWatch:{type:Boolean,default:!0},delay:{type:[Number,String],default:0,validator:s},ease:{type:String,default:"ease-in"}},setup(e,{slots:t}){const o=Object(a["ref"])(null),n=Object(a["ref"])(null),r=Object(a["ref"])(null),l=Object(a["ref"])(void 0!=t.html),i=Object(a["ref"])(""),c=Object(a["reactive"])({xPos:0,yPos:0,reqFrame:null,singleWaitTimeout:null,realBoxWidth:0,realBoxHeight:0,isHover:!1}),s=Object(a["computed"])(()=>({width:c.realBoxWidth?c.realBoxWidth+"px":"auto",transform:`translate(${c.xPos}px,${c.yPos}px)`,transition:`all ${e.ease} ${e.delay}ms`,overflow:"hidden"})),d=Object(a["computed"])(()=>"left"==e.direction||"right"==e.direction),f=Object(a["computed"])(()=>d.value?{float:"left",overflow:"hidden"}:{overflow:"hidden"}),m=Object(a["computed"])(()=>e.datas.length>=e.limitScrollNum),p=Object(a["computed"])(()=>e.isRemUnit?parseInt(window.getComputedStyle(document.documentElement,null).fontSize):1),v=Object(a["computed"])(()=>e.singleWidth*p.value),b=Object(a["computed"])(()=>e.singleHeight*p.value),y=Object(a["computed"])(()=>e.hover&&e.autoPlay&&m.value),j=Object(a["computed"])(()=>{let t,o=e.step;return t=d.value?v.value:b.value,t>0&&t%o>0&&console.error("如果设置了单步滚动,step需是单步大小的约数,否则无法保证单步滚动结束的位置是否准确。~~~~~"),o});function O(){cancelAnimationFrame(c.reqFrame||""),c.reqFrame=null}function h(){c.isHover||(O(),c.reqFrame=requestAnimationFrame((function(){const t=c.realBoxHeight/2,o=c.realBoxWidth/2;let{direction:n,singleWaitTime:r}=e;"up"===n?(Math.abs(c.yPos)>=t&&(c.yPos=0),c.yPos-=j.value):"down"===n?(c.yPos>=0&&(c.yPos=-1*t),c.yPos+=j.value):"left"===n?(Math.abs(c.xPos)>=o&&(c.xPos=0),c.xPos-=j.value):"right"===n&&(c.xPos>=0&&(c.xPos=-1*o),c.xPos+=j.value),c.singleWaitTimeout&&clearTimeout(c.singleWaitTimeout),b.value?Math.abs(c.yPos)%b.value<j.value?c.singleWaitTimeout=setTimeout(()=>{h()},r):h():v.value&&Math.abs(c.xPos)%v.value<j.value?c.singleWaitTimeout=setTimeout(()=>{h()},r):h()})))}function S(){Object(a["nextTick"])(()=>{if(u(e.datas),i.value="",d.value){let t=n.value.offsetWidth;e.autoPlay&&(t=2*t+1),c.realBoxWidth=t}e.autoPlay&&(m.value?l.value?(c.realBoxHeight=r.value.offsetHeight,h()):(i.value=n.value.innerHTML,Object(a["nextTick"])(()=>{c.realBoxHeight=r.value.offsetHeight,h()})):(O(),c.yPos=c.xPos=0))})}function w(){c.isHover=!1,h()}function g(){c.isHover=!0,c.singleWaitTimeout&&clearTimeout(c.singleWaitTimeout),O()}function x(){y.value&&g()}function B(){y.value&&w()}function P(){O(),c.isHover=!1,S()}return Object(a["watch"])(()=>e.datas,()=>{e.isWatch&&P()},{deep:!0}),Object(a["watch"])(()=>e.autoPlay,e=>{e?P():g()}),Object(a["onBeforeMount"])(()=>{O(),clearTimeout(c.singleWaitTimeout)}),Object(a["onMounted"])(()=>{S()}),{scrollRef:o,slotListRef:n,realBoxRef:r,realBoxStyle:s,floatStyle:f,isScroll:m,slotHtml:l,scrollHtml:i,enter:x,leave:B}}});d.render=c;var f=d;f.install=e=>{e.component(f.name,f)};var m=f;const p={ref:"scrollRef"};function v(e,t,o,n,r,l){return Object(a["openBlock"])(),Object(a["createBlock"])("div",p,[Object(a["createVNode"])("div",{ref:"realBoxRef",onMouseenter:t[1]||(t[1]=(...t)=>e.enter(...t)),onMouseleave:t[2]||(t[2]=(...t)=>e.leave(...t)),class:e.cssStep?"step realBox":"realBox"},[Object(a["createVNode"])("div",{ref:"slotListRef",style:e.floatStyle},[Object(a["renderSlot"])(e.$slots,"default")],4),e.slotHtml&&e.showHtml?(Object(a["openBlock"])(),Object(a["createBlock"])("div",{key:0,style:e.floatStyle},[Object(a["renderSlot"])(e.$slots,"html")],4)):!e.slotHtml&&e.showHtml?(Object(a["openBlock"])(),Object(a["createBlock"])("div",{key:1,innerHTML:e.scrollHtml,style:e.floatStyle},null,12,["innerHTML"])):Object(a["createCommentVNode"])("",!0)],34)],512)}const b=Object(a["defineComponent"])({name:"css-seamless-scroll",props:{datas:{type:Array,required:!0},step:{type:[Number,String],validator:s},limitScrollNum:{type:[Number,String],default:5,validator:s},hover:{type:Boolean,default:!1},direction:{type:String,default:"up"},autoPlay:{type:Boolean,default:!0},isWatch:{type:Boolean,default:!0},count:{type:[Number,String],default:"infinite",validator:function(e){return isNaN(e)&&"infinite"!==e?(console.warn("Must be in number format"),"infinite"):e+""}},duration:{type:[Number,String],validator:s},cubicBezier:{type:Object,default:{x1:0,y1:0,x2:1,y2:1}}},setup(e,{slots:t}){const o=Object(a["ref"])(null),n=Object(a["ref"])(null),r=Object(a["ref"])(null),l=Object(a["ref"])(void 0!=t.html),i=Object(a["ref"])(""),c=Object(a["ref"])("paused"),s=Object(a["ref"])(0),d=Object(a["ref"])(0),f=Object(a["computed"])(()=>"left"==e.direction||"right"==e.direction),m=Object(a["computed"])(()=>f.value?{float:"left",overflow:"hidden"}:{overflow:"hidden"}),p=Object(a["computed"])(()=>e.datas.length>=e.limitScrollNum),v=Object(a["computed"])(()=>e.hover&&e.autoPlay&&p.value),b=Object(a["computed"])(()=>e.autoPlay&&p.value);function y(){Object(a["nextTick"])(()=>{if(u(e.datas),i.value="",f.value){let t=n.value.offsetWidth;e.autoPlay&&(t=2*t+1),s.value=t}e.autoPlay&&p.value&&(l.value?(d.value=r.value.offsetHeight,c.value="running"):(i.value=n.value.innerHTML,Object(a["nextTick"])(()=>{d.value=r.value.offsetHeight,c.value="running"})))})}function j(){v.value&&(c.value="paused")}function O(){v.value&&(c.value="running")}Object(a["watch"])(()=>e.datas,()=>{e.isWatch&&(c.value="paused",y())},{deep:!0}),Object(a["watch"])(()=>e.autoPlay,e=>{c.value=e?"running":"paused"}),Object(a["onMounted"])(()=>{y()});const h=Object(a["computed"])(()=>void 0!==e.duration?e.duration+"s":f.value&&0!=s.value?s.value/2/60+"s":0!=d.value?d.value/2/60+"s":"0s"),S=Object(a["computed"])(()=>e.step),w=Object(a["computed"])(()=>isNaN(e.cubicBezier.x1)||isNaN(e.cubicBezier.y1)||isNaN(e.cubicBezier.x1)||isNaN(e.cubicBezier.y2)?(console.warn("The Bézier curve value must be a number"),{x1:0,y1:0,x2:1,y2:1}):e.cubicBezier),g=Object(a["computed"])(()=>e.count),x=Object(a["computed"])(()=>0!=s.value?s.value+"px":"auto"),B=Object(a["computed"])(()=>"down"==e.direction?-d.value/2+"px":"0"),P=Object(a["computed"])(()=>"up"==e.direction?-d.value/2+"px":"0"),H=Object(a["computed"])(()=>"right"==e.direction?-s.value/2+"px":"0"),T=Object(a["computed"])(()=>"left"==e.direction?-s.value/2+"px":"0");return{scrollRef:o,slotListRef:n,realBoxRef:r,scrollHtml:i,floatStyle:m,slotHtml:l,showHtml:b,enter:j,leave:O,cssStep:S,cssDuration:h,cssCount:g,cssCubicBezier:w,cssRealBoxWidth:x,cssStartY:B,cssEndY:P,cssStartX:H,cssEndX:T,cssPlayStatus:c}}}),y=()=>{Object(a["useCssVars"])(e=>({"30dfe170":e.cssRealBoxWidth,b7b947ea:e.cssDuration,e036a410:e.cssCount,"60e2a535":e.cssCubicBezier.x1,"60e2a554":e.cssCubicBezier.y1,"60e2a536":e.cssCubicBezier.x2,"60e2a555":e.cssCubicBezier.y2,"3dac5cfd":e.cssPlayStatus,ef87ef26:e.cssStartX,ef87ef24:e.cssStartY,ac562e7a:e.cssStep,ac631658:e.cssEndX,ac631656:e.cssEndY}))},j=b.setup;b.setup=j?(e,t)=>(y(),j(e,t)):y;var O=b;o("38a8");O.render=v;var h=O;h.install=e=>{e.component(h.name,h)};var S=h;const w=[m,S],g=function(e,t={}){w.forEach(o=>{e.component(t.name||o.name,o)})};"undefined"!==typeof window&&window.Vue&&g(window.Vue);var x=g;t["default"]=x}})}));
//# sourceMappingURL=vue3SeamlessScroll.umd.min.js.map