@zengxiaohui/vue3-seamless-scroll/lib/vue3SeamlessScroll-es.js

一个兼容vue 2.x-3.x 的vue-seamless-scroll区域滚动插件

import{openBlock as t,createElementBlock as i,normalizeStyle as s,normalizeClass as e,renderSlot as o,createCommentVNode as h,createElementVNode as n}from"vue";var a=function(){window.cancelAnimationFrame=window.cancelAnimationFrame||window.webkitCancelAnimationFrame||window.mozCancelAnimationFrame||window.oCancelAnimationFrame||window.msCancelAnimationFrame||function(t){return window.clearTimeout(t)},window.requestAnimationFrame=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){return window.setTimeout(t,1e3/60)}},l=function(t,i){if(t===i)return!0;if(t.length!==i.length)return!1;for(var s=0;s<t.length;++s)if(t[s]!==i[s])return!1;return!0};a();const r={name:"vue-seamless-scroll",data:()=>({xPos:0,yPos:0,delay:0,copyHtml:"",height:0,width:0,realBoxWidth:0}),props:{data:{type:Array,default:()=>[]},classOption:{type:Object,default:()=>({})}},computed:{leftSwitchState(){return this.xPos<0},rightSwitchState(){return Math.abs(this.xPos)<this.realBoxWidth-this.width},leftSwitchClass(){return this.leftSwitchState?"":this.options.switchDisabledClass},rightSwitchClass(){return this.rightSwitchState?"":this.options.switchDisabledClass},leftSwitch(){return{position:"absolute",margin:`${this.height/2}px 0 0 -${this.options.switchOffset}px`,transform:"translate(-100%,-50%)"}},rightSwitch(){return{position:"absolute",margin:`${this.height/2}px 0 0 ${this.width+this.options.switchOffset}px`,transform:"translateY(-50%)"}},float(){return this.isHorizontal?{float:"left",overflow:"hidden"}:{overflow:"hidden"}},pos(){return{transform:`translate(${this.xPos}px,${this.yPos}px)`,transition:`all ${this.ease} ${this.delay}ms`,overflow:"hidden"}},defaultOption:()=>({step:1,stop:!1,limitMoveNum:5,hoverStop:!0,direction:1,openTouch:!0,singleHeight:0,singleWidth:0,waitTime:1e3,switchOffset:30,autoPlay:!0,navigation:!1,switchSingleStep:134,switchDelay:400,switchDisabledClass:"disabled",isSingleRemUnit:!1}),options(){return Object.assign({},this.defaultOption,this.classOption)},navigation(){return this.options.navigation},autoPlay(){return!this.navigation&&this.options.autoPlay},scrollSwitch(){return this.data.length>=this.options.limitMoveNum},hoverStopSwitch(){return this.options.hoverStop&&this.autoPlay&&this.scrollSwitch},canTouchScroll(){return this.options.openTouch},isHorizontal(){return this.options.direction>1},baseFontSize(){return this.options.isSingleRemUnit?parseInt(window.getComputedStyle(document.documentElement,null).fontSize):1},realSingleStopWidth(){return this.options.singleWidth*this.baseFontSize},realSingleStopHeight(){return this.options.singleHeight*this.baseFontSize},step(){let t,i=this.options.step;return t=this.isHorizontal?this.realSingleStopWidth:this.realSingleStopHeight,t>0&&t%i>0&&console.error("如果设置了单步滚动,step需是单步大小的约数,否则无法保证单步滚动结束的位置是否准确。~~~~~"),i}},methods:{reset(){this._cancle(),this._initMove()},leftSwitchClick(){this.leftSwitchState&&(Math.abs(this.xPos)<this.options.switchSingleStep?this.xPos=0:this.xPos+=this.options.switchSingleStep)},rightSwitchClick(){this.rightSwitchState&&(this.realBoxWidth-this.width+this.xPos<this.options.switchSingleStep?this.xPos=this.width-this.realBoxWidth:this.xPos-=this.options.switchSingleStep)},_cancle(){cancelAnimationFrame(this.reqFrame||"")},touchStart(t){if(!this.canTouchScroll)return;let i;const s=t.targetTouches[0],{waitTime:e,singleHeight:o,singleWidth:h}=this.options;this.startPos={x:s.pageX,y:s.pageY},this.startPosY=this.yPos,this.startPosX=this.xPos,o&&h?(i&&clearTimeout(i),i=setTimeout((()=>{this._cancle()}),e+20)):this._cancle()},touchMove(t){if(!this.canTouchScroll||t.targetTouches.length>1||t.scale&&1!==t.scale)return;const i=t.targetTouches[0],{direction:s}=this.options;this.endPos={x:i.pageX-this.startPos.x,y:i.pageY-this.startPos.y},event.preventDefault();const e=Math.abs(this.endPos.x)<Math.abs(this.endPos.y)?1:0;1===e&&s<2?this.yPos=this.startPosY+this.endPos.y:0===e&&s>1&&(this.xPos=this.startPosX+this.endPos.x)},touchEnd(){if(!this.canTouchScroll)return;let t;const i=this.options.direction;if(this.delay=50,1===i)this.yPos>0&&(this.yPos=0);else if(0===i){let t=this.realBoxHeight/2*-1;this.yPos<t&&(this.yPos=t)}else if(2===i)this.xPos>0&&(this.xPos=0);else if(3===i){let t=-1*this.realBoxWidth;this.xPos<t&&(this.xPos=t)}t&&clearTimeout(t),t=setTimeout((()=>{this.delay=0,this._move()}),this.delay)},enter(){this.hoverStopSwitch&&this._stopMove()},leave(){this.hoverStopSwitch&&this._startMove()},_move(){this.isHover||this.options.stop||(this._cancle(),this.reqFrame=requestAnimationFrame((()=>{const t=this.realBoxHeight/2,i=this.realBoxWidth/2;let{direction:s,waitTime:e}=this.options,{step:o}=this;1===s?(Math.abs(this.yPos)>=t&&(this.$emit("ScrollEnd"),this.yPos=0),this.yPos-=o):0===s?(this.yPos>=0&&(this.$emit("ScrollEnd"),this.yPos=-1*t),this.yPos+=o):2===s?(Math.abs(this.xPos)>=i&&(this.$emit("ScrollEnd"),this.xPos=0),this.xPos-=o):3===s&&(this.xPos>=0&&(this.$emit("ScrollEnd"),this.xPos=-1*i),this.xPos+=o),this.singleWaitTime&&clearTimeout(this.singleWaitTime),this.realSingleStopHeight?Math.abs(this.yPos)%this.realSingleStopHeight<o?this.singleWaitTime=setTimeout((()=>{this.SingScrollEnd(),this._move()}),e):this._move():this.realSingleStopWidth&&Math.abs(this.xPos)%this.realSingleStopWidth<o?this.singleWaitTime=setTimeout((()=>{this.SingScrollEnd(),this._move()}),e):this._move()})))},_initMove(){this.$nextTick((()=>{const{switchDelay:t,stop:i}=this.options;if(i)return;const{autoPlay:s,isHorizontal:e}=this;if(this._dataWarm(this.data),this.copyHtml="",e){this.height=this.$refs.wrap.offsetHeight,this.width=this.$refs.wrap.offsetWidth;let t=this.$refs.slotList.offsetWidth;s&&(t=2*t+1),this.$refs.realBox.style.width=t+"px",this.realBoxWidth=t}if(!s)return this.ease="linear",void(this.delay=t);this.ease="ease-in",this.delay=0,this.scrollSwitch?(this.copyHtml=this.$refs.slotList.innerHTML,setTimeout((()=>{this.realBoxHeight=this.$refs.realBox.offsetHeight,this._move()}),0)):(this._cancle(),this.yPos=this.xPos=0)}))},_dataWarm(t){t.length>100&&console.warn(`数据达到了${t.length}条有点多哦~,可能会造成部分老旧浏览器卡顿。`)},_startMove(){this.isHover=!1,this._move()},_stopMove(){this.isHover=!0,this.singleWaitTime&&clearTimeout(this.singleWaitTime),this._cancle()},Change(t){let i;i=function t(i){return Object.keys(i.dataset).length>1?i:i.parentElement&&"vue-seamless-scroll"!==i.parentElement.className?t(i.parentElement):void 0}(t.target),i&&this.$emit("onChange",i.dataset)},SingScrollEnd(){let{direction:t}=this.options;1===t||0===t?this.$emit("SingScrollEnd",this.yPos):this.$emit("SingScrollEnd",this.xPos)}},mounted(){this._initMove()},watch:{data(t,i){this._dataWarm(t),l(t,i)||this.reset()},autoPlay(t){t?this.reset():this._stopMove()}},beforeCreate(){this.reqFrame=null,this.singleWaitTime=null,this.isHover=!1,this.ease="ease-in"},beforeDestroy(){this._cancle(),clearTimeout(this.singleWaitTime)}},c={ref:"wrap"},d=["innerHTML"];r.render=function(a,l,r,u,p,m){return t(),i("div",c,[m.navigation?(t(),i("div",{key:0,style:s(m.leftSwitch),class:e(m.leftSwitchClass),onClick:l[0]||(l[0]=(...t)=>m.leftSwitchClick&&m.leftSwitchClick(...t))},[o(a.$slots,"left-switch")],6)):h("",!0),m.navigation?(t(),i("div",{key:1,style:s(m.rightSwitch),class:e(m.rightSwitchClass),onClick:l[1]||(l[1]=(...t)=>m.rightSwitchClick&&m.rightSwitchClick(...t))},[o(a.$slots,"right-switch")],6)):h("",!0),n("div",{ref:"realBox",style:s(m.pos),onMouseenter:l[4]||(l[4]=(...t)=>m.enter&&m.enter(...t)),onMouseleave:l[5]||(l[5]=(...t)=>m.leave&&m.leave(...t)),onTouchstart:l[6]||(l[6]=(...t)=>m.touchStart&&m.touchStart(...t)),onTouchmove:l[7]||(l[7]=(...t)=>m.touchMove&&m.touchMove(...t)),onTouchend:l[8]||(l[8]=(...t)=>m.touchEnd&&m.touchEnd(...t))},[n("div",{ref:"slotList",style:s(m.float),onClick:l[2]||(l[2]=(...t)=>m.Change&&m.Change(...t)),class:"vue-seamless-scroll"},[o(a.$slots,"default")],4),n("div",{innerHTML:p.copyHtml,style:s(m.float),onClick:l[3]||(l[3]=(...t)=>m.Change&&m.Change(...t))},null,12,d)],36)],512)},a();const u={name:"vue-seamless-scroll",data:()=>({xPos:0,yPos:0,delay:0,copyHtml:"",height:0,width:0,realBoxWidth:0}),props:{data:{type:Array,default:()=>[]},classOption:{type:Object,default:()=>({})}},computed:{leftSwitchState(){return this.xPos<0},rightSwitchState(){return Math.abs(this.xPos)<this.realBoxWidth-this.width},leftSwitchClass(){return this.leftSwitchState?"":this.options.switchDisabledClass},rightSwitchClass(){return this.rightSwitchState?"":this.options.switchDisabledClass},leftSwitch(){return{position:"absolute",margin:`${this.height/2}px 0 0 -${this.options.switchOffset}px`,transform:"translate(-100%,-50%)"}},rightSwitch(){return{position:"absolute",margin:`${this.height/2}px 0 0 ${this.width+this.options.switchOffset}px`,transform:"translateY(-50%)"}},float(){return this.isHorizontal?{float:"left",overflow:"hidden"}:{overflow:"hidden"}},pos(){return{transform:`translate(${this.xPos}px,${this.yPos}px)`,transition:`all ${this.ease} ${this.delay}ms`,overflow:"hidden"}},defaultOption:()=>({stop:!1,step:1,limitMoveNum:5,hoverStop:!0,direction:1,openTouch:!0,singleHeight:0,singleWidth:0,waitTime:1e3,switchOffset:30,autoPlay:!0,navigation:!1,switchSingleStep:134,switchDelay:400,switchDisabledClass:"disabled",isSingleRemUnit:!1}),options(){return Object.assign({},this.defaultOption,this.classOption)},navigation(){return this.options.navigation},autoPlay(){return!this.navigation&&this.options.autoPlay},scrollSwitch(){return this.data.length>=this.options.limitMoveNum},hoverStopSwitch(){return this.options.hoverStop&&this.autoPlay&&this.scrollSwitch},canTouchScroll(){return this.options.openTouch},isHorizontal(){return this.options.direction>1},baseFontSize(){return this.options.isSingleRemUnit?parseInt(window.getComputedStyle(document.documentElement,null).fontSize):1},realSingleStopWidth(){return this.options.singleWidth*this.baseFontSize},realSingleStopHeight(){return this.options.singleHeight*this.baseFontSize},step(){let t,i=this.options.step;return t=this.isHorizontal?this.realSingleStopWidth:this.realSingleStopHeight,t>0&&t%i>0&&console.error("如果设置了单步滚动,step需是单步大小的约数,否则无法保证单步滚动结束的位置是否准确。~~~~~"),i}},methods:{reset(){this._cancle(),this._initMove()},leftSwitchClick(){this.leftSwitchState&&(Math.abs(this.xPos)<this.options.switchSingleStep?this.xPos=0:this.xPos+=this.options.switchSingleStep)},rightSwitchClick(){this.rightSwitchState&&(this.realBoxWidth-this.width+this.xPos<this.options.switchSingleStep?this.xPos=this.width-this.realBoxWidth:this.xPos-=this.options.switchSingleStep)},_cancle(){cancelAnimationFrame(this.reqFrame||"")},touchStart(t){if(!this.canTouchScroll)return;let i;const s=t.targetTouches[0],{waitTime:e,singleHeight:o,singleWidth:h}=this.options;this.startPos={x:s.pageX,y:s.pageY},this.startPosY=this.yPos,this.startPosX=this.xPos,o&&h?(i&&clearTimeout(i),i=setTimeout((()=>{this._cancle()}),e+20)):this._cancle()},touchMove(t){if(!this.canTouchScroll||t.targetTouches.length>1||t.scale&&1!==t.scale)return;const i=t.targetTouches[0],{direction:s}=this.options;this.endPos={x:i.pageX-this.startPos.x,y:i.pageY-this.startPos.y},event.preventDefault();const e=Math.abs(this.endPos.x)<Math.abs(this.endPos.y)?1:0;1===e&&s<2?this.yPos=this.startPosY+this.endPos.y:0===e&&s>1&&(this.xPos=this.startPosX+this.endPos.x)},touchEnd(){if(!this.canTouchScroll)return;let t;const i=this.options.direction;if(this.delay=50,1===i)this.yPos>0&&(this.yPos=0);else if(0===i){let t=this.realBoxHeight/2*-1;this.yPos<t&&(this.yPos=t)}else if(2===i)this.xPos>0&&(this.xPos=0);else if(3===i){let t=-1*this.realBoxWidth;this.xPos<t&&(this.xPos=t)}t&&clearTimeout(t),t=setTimeout((()=>{this.delay=0,this._move()}),this.delay)},enter(){this.hoverStopSwitch&&this._stopMove()},leave(){this.hoverStopSwitch&&this._startMove()},_move(){this.isHover||this.options.stop||(this._cancle(),this.reqFrame=requestAnimationFrame(function(){const t=this.realBoxHeight/2,i=this.realBoxWidth/2;let{direction:s,waitTime:e}=this.options,{step:o}=this;1===s?(Math.abs(this.yPos)>=t&&(this.$emit("ScrollEnd"),this.yPos=0),this.yPos-=o):0===s?(this.yPos>=0&&(this.$emit("ScrollEnd"),this.yPos=-1*t),this.yPos+=o):2===s?(Math.abs(this.xPos)>=i&&(this.$emit("ScrollEnd"),this.xPos=0),this.xPos-=o):3===s&&(this.xPos>=0&&(this.$emit("ScrollEnd"),this.xPos=-1*i),this.xPos+=o),this.singleWaitTime&&clearTimeout(this.singleWaitTime),this.realSingleStopHeight?Math.abs(this.yPos)%this.realSingleStopHeight<o?this.singleWaitTime=setTimeout((()=>{this.SingScrollEnd(),this._move()}),e):this._move():this.realSingleStopWidth&&Math.abs(this.xPos)%this.realSingleStopWidth<o?this.singleWaitTime=setTimeout((()=>{this.SingScrollEnd(),this._move()}),e):this._move()}.bind(this)))},_initMove(){this.$nextTick((()=>{const{switchDelay:t,stop:i}=this.options;if(i)return;const{autoPlay:s,isHorizontal:e}=this;if(this._dataWarm(this.data),this.copyHtml="",e){this.height=this.$refs.wrap.offsetHeight,this.width=this.$refs.wrap.offsetWidth;let t=this.$refs.slotList.offsetWidth;s&&(t=2*t+1),this.$refs.realBox.style.width=t+"px",this.realBoxWidth=t}if(!s)return this.ease="linear",void(this.delay=t);this.ease="ease-in",this.delay=0,this.scrollSwitch?(this.copyHtml=this.$refs.slotList.innerHTML,setTimeout((()=>{this.realBoxHeight=this.$refs.realBox.offsetHeight,this._move()}),0)):(this._cancle(),this.yPos=this.xPos=0)}))},_dataWarm(t){t.length>100&&console.warn(`数据达到了${t.length}条有点多哦~,可能会造成部分老旧浏览器卡顿。`)},_startMove(){this.isHover=!1,this._move()},_stopMove(){this.isHover=!0,this.singleWaitTime&&clearTimeout(this.singleWaitTime),this._cancle()},Change(t){let i;i=function t(i){return Object.keys(i.dataset).length>1?i:i.parentElement&&"vue-seamless-scroll"!==i.parentElement.className?t(i.parentElement):void 0}(t.target),i&&this.$emit("onChange",i.dataset)},SingScrollEnd(){let{direction:t}=this.options;1===t||0===t?this.$emit("SingScrollEnd",this.yPos):this.$emit("SingScrollEnd",this.xPos)}},mounted(){this._initMove()},watch:{data(t,i){this._dataWarm(t),l(t,i)||this.reset()},autoPlay(t){t?this.reset():this._stopMove()}},beforeCreate(){this.reqFrame=null,this.singleWaitTime=null,this.isHover=!1,this.ease="ease-in"},beforeDestroy(){this._cancle(),clearTimeout(this.singleWaitTime)}},p={ref:"wrap"},m=["innerHTML"];u.render=function(a,l,r,c,d,u){return t(),i("div",p,[u.navigation?(t(),i("div",{key:0,style:s(u.leftSwitch),class:e(u.leftSwitchClass),onClick:l[0]||(l[0]=(...t)=>u.leftSwitchClick&&u.leftSwitchClick(...t))},[o(a.$slots,"left-switch")],6)):h("",!0),u.navigation?(t(),i("div",{key:1,style:s(u.rightSwitch),class:e(u.rightSwitchClass),onClick:l[1]||(l[1]=(...t)=>u.rightSwitchClick&&u.rightSwitchClick(...t))},[o(a.$slots,"right-switch")],6)):h("",!0),n("div",{ref:"realBox",style:s(u.pos),onMouseenter:l[3]||(l[3]=(...t)=>u.enter&&u.enter(...t)),onMouseleave:l[4]||(l[4]=(...t)=>u.leave&&u.leave(...t)),onTouchstart:l[5]||(l[5]=(...t)=>u.touchStart&&u.touchStart(...t)),onTouchmove:l[6]||(l[6]=(...t)=>u.touchMove&&u.touchMove(...t)),onTouchend:l[7]||(l[7]=(...t)=>u.touchEnd&&u.touchEnd(...t))},[n("div",{ref:"slotList",style:s(u.float),onClick:l[2]||(l[2]=(...t)=>u.Change&&u.Change(...t)),class:"vue-seamless-scroll"},[o(a.$slots,"default")],4),n("div",{innerHTML:d.copyHtml,style:s(u.float)},null,12,m)],36)],512)};var S={install:t=>{parseFloat(t.version)>3?t.component(r.name,r):t.component(u.name,u)}};export{S as default};
//# sourceMappingURL=vue3SeamlessScroll-es.js.map