swiper-vue/dist/hut-es.js

轮播 swiper slider component for Vue.js

import{openBlock as e,createElementBlock as t,normalizeClass as i,normalizeStyle as n,createElementVNode as r,Fragment as o,renderList as s,renderSlot as a,withModifiers as h,createCommentVNode as l}from"vue";var c={props:{direction:{type:String,default:"horizontal"},autoplay:{type:Boolean,default:!0},delay:{type:Number,default:2e3},height:{type:Number,default:200},width:{type:Number,default:null},items:{type:Array,default:function(){return[]}},arrow:{type:String,default:"always"},indicator:{type:Boolean,default:!0},triggerMove:{type:Number,default:null},mouseSlider:{type:Boolean,default:!0},mouseScroll:{type:Boolean,default:!1},hoverStop:{type:Boolean,default:!0}},data:function(){return{initTimer:null,timer:null,scrollTimer:null,currentIndex:0,containerWidth:0,containerHeight:0,indicatorWidth:"20px",isMouseDown:!1,moveDistance:0}},watch:{items:{handler:function(e,t){var i=this;if(this.clearTimer(),t&&0!==t.length){var n=this.$refs.swiperContainerRef;n.childNodes.length&&(n.removeChild(n.firstElementChild),n.removeChild(n.lastElementChild))}this.initTimer=setTimeout((function(){i.init()}),100)},deep:!0,immediate:!0}},computed:{isEmpty:function(){var e;return!(null===(e=this.items)||void 0===e?void 0:e.length)},cursorArrowStyle:function(){return this.isEmpty?{cursor:"not-allowed"}:{cursor:"pointer"}},showIndicator:function(){return this.indicator&&this.dataLength>1},containerStyle:function(){return{height:this.height?"".concat(this.height,"px"):"100%",width:this.width?"".concat(this.width,"px"):"100%"}},cloneData:function(){return this.items},dataLength:function(){return this.items.length},getIndicatorStyle:function(){return"vertical"==this.direction?{height:this.indicatorWidth}:{width:this.indicatorWidth}}},methods:{onHoverStartTimer:function(){var e=this;this.$nextTick((function(){e.hoverStop||e.onAutoPlay()}))},moveTo:function(e){"vertical"==this.direction?this.$refs.swiperContainerRef.style.transform="translateY(".concat(-100*e,"%)"):this.$refs.swiperContainerRef.style.transform="translateX(".concat(-100*e,"%)"),this.$refs.swiperContainerRef.style.transition="all 1s ease-in-out",this.currentIndex=e},onMousedown:function(){this.mouseSlider&&(this.clearTimer(),this.isMouseDown=!0)},onMousemove:function(e){this.isMouseDown&&("vertical"==this.direction?this.moveDistance+=e.movementY:this.moveDistance+=e.movementX,Math.abs(this.moveDistance)>(this.triggerMove?this.triggerMove:"vertical"==this.direction?this.containerHeight/2.5:this.containerWidth/2.5)&&(this.isMouseDown=!1,this.moveDistance>0?this.preArrow():this.nextArrow(),this.moveDistance=0,this.onHoverStartTimer()))},scrollMove:function(e){var t=this;this.scrollTimer&&(clearTimeout(this.scrollTimer),this.scrollTimer=null),this.scrollTimer=setTimeout((function(){"pre"==e?t.preArrow():t.nextArrow()}),250)},onMousewheel:function(e){e.preventDefault&&e.preventDefault(),this.mouseScroll&&0!==e.wheelDelta&&(this.clearTimer(),e.wheelDelta>0?this.scrollMove("pre"):this.scrollMove("next"),this.onHoverStartTimer())},onChange:function(e,t){this.$emit("on-change",e,t)},onIndicator:function(e){var t=this;this.currentIndex!==e&&(this.currentIndex>e?this.$nextTick((function(){t.onChange("pre",e)})):this.$nextTick((function(){t.onChange("next",e)})),this.hoverStop||this.clearTimer(),this.moveTo(e),this.onHoverStartTimer())},preArrow:function(){var e=this;this.currentIndex<=0?(this.$refs.swiperContainerRef.style.transition="none","vertical"==this.direction?this.$refs.swiperContainerRef.style.transform="translateY(".concat(-100*this.dataLength,"%)"):this.$refs.swiperContainerRef.style.transform="translateX(".concat(-100*this.dataLength,"%)"),this.$refs.swiperContainerRef.clientHeight,this.moveTo(this.dataLength-1)):this.moveTo(this.currentIndex-1),this.$nextTick((function(){e.onChange("pre",e.currentIndex)}))},handlePreArrow:function(){this.isEmpty||(this.hoverStop||this.clearTimer(),this.preArrow(),this.onHoverStartTimer())},nextArrow:function(){var e=this;this.currentIndex>=this.dataLength-1?(this.$refs.swiperContainerRef.style.transition="none","vertical"==this.direction?this.$refs.swiperContainerRef.style.transform="translateY(100%)":this.$refs.swiperContainerRef.style.transform="translateX(100%)",this.$refs.swiperContainerRef.clientHeight,this.moveTo(0)):this.moveTo(this.currentIndex+1),this.$nextTick((function(){e.onChange("next",e.currentIndex)}))},handleNextArrow:function(e){this.isEmpty||(this.hoverStop||this.clearTimer(),this.nextArrow(),this.onHoverStartTimer())},onAutoPlay:function(){var e=this;this.autoplay&&!this.isEmpty&&(this.timer=setInterval((function(){e.nextArrow()}),this.delay))},init:function(){var e;if(0!==(null===(e=this.items)||void 0===e?void 0:e.length)){var t=this.$refs.swiperContainerRef.lastElementChild.cloneNode(!0),i=this.$refs.swiperContainerRef.firstElementChild.cloneNode(!0);this.$refs.swiperContainerRef.insertBefore(t,this.$refs.swiperContainerRef.firstElementChild),this.$refs.swiperContainerRef.appendChild(i),t.style.position="absolute","vertical"==this.direction?t.style.transform="translateY(".concat(-1*this.containerHeight,"px)"):t.style.transform="translateX(".concat(-1*this.containerWidth,"px)"),this.onAutoPlay()}else this.clearTimer()},onMouseleave:function(){this.hoverStop&&this.onAutoPlay()},clearTimer:function(){this.timer&&clearInterval(this.timer),this.timer=null,this.initTimer&&clearTimeout(this.initTimer),this.initTimer=null},onStopSwiper:function(){this.hoverStop&&this.clearTimer()},setIndicatorWidth:function(){if("vertical"==this.direction){var e=this.containerHeight/5*3/this.dataLength;this.indicatorWidth=e>60?"60px":"".concat(e,"px")}else{var t=(this.containerWidth-200)/this.dataLength;this.indicatorWidth=t>60?"60px":"".concat(t,"px")}},onMouseup:function(){this.isMouseDown&&!this.hoverStop&&(this.clearTimer(),this.onAutoPlay()),this.isMouseDown=!1,this.moveDistance=0}},mounted:function(){var e=this;this.$nextTick((function(){e.containerWidth=e.$refs.swiperRef.clientWidth,e.containerHeight=e.$refs.swiperRef.clientHeight,e.setIndicatorWidth(),e.mouseSlider&&document.addEventListener("mouseup",e.onMouseup),e.mouseScroll&&e.$refs.swiperRef.addEventListener("wheel",e.onMousewheel)}))},beforeUnmount:function(){this.clearTimer(),this.scrollTimer&&clearTimeout(this.scrollTimer),this.scrollTimer=null,this.mouseSlider&&document.removeEventListener("mouseup",this.onMouseup),this.mouseScroll&&this.$refs.swiperRef.removeEventListener("wheel",this.onMousewheel)}},u={class:"vue-swiper--container",ref:"swiperContainerRef"},d=r("div",{class:"default-arrow"}," < ",-1),f=r("div",{class:"default-arrow"}," > ",-1),p={key:0,class:"vue-swiper--indicator"},m=["onClick"],v={key:1,class:"vue-swiper--empty"};c.render=function(c,w,y,S,T,x){return e(),t("div",{class:i(["vue-swiper","arrow-"+y.arrow,y.direction]),ref:"swiperRef",style:n(x.containerStyle),onMouseenter:w[5]||(w[5]=function(){return x.onStopSwiper&&x.onStopSwiper.apply(x,arguments)}),onMouseleave:w[6]||(w[6]=function(){return x.onMouseleave&&x.onMouseleave.apply(x,arguments)}),onMousedown:w[7]||(w[7]=function(){return x.onMousedown&&x.onMousedown.apply(x,arguments)}),onMousemove:w[8]||(w[8]=function(){return x.onMousemove&&x.onMousemove.apply(x,arguments)})},[r("div",u,[(e(!0),t(o,null,s(x.cloneData,(function(n,r){return e(),t("div",{class:i(["vue-swiper--item",{active:r===T.currentIndex}]),key:r},[a(c.$slots,"default",{item:n,index:r,activeIndex:T.currentIndex,isActive:r===T.currentIndex})],2)})),128))],512),r("div",{class:"vue-swiper--arrow-pre",style:n(x.cursorArrowStyle),onMouseenter:w[0]||(w[0]=function(){return x.onStopSwiper&&x.onStopSwiper.apply(x,arguments)}),onClick:w[1]||(w[1]=h((function(){return x.handlePreArrow&&x.handlePreArrow.apply(x,arguments)}),["stop"]))},[a(c.$slots,"pre-icon",{},(function(){return[d]}))],36),r("div",{class:"vue-swiper--arrow-next",style:n(x.cursorArrowStyle),onMouseenter:w[2]||(w[2]=function(){return x.onStopSwiper&&x.onStopSwiper.apply(x,arguments)}),onClick:w[3]||(w[3]=h((function(){return x.handleNextArrow&&x.handleNextArrow.apply(x,arguments)}),["stop"]))},[a(c.$slots,"next-icon",{},(function(){return[f]}))],36),x.showIndicator?(e(),t("div",p,[(e(!0),t(o,null,s(y.items,(function(r,o){return e(),t("div",{class:i(["vue-swiper--indicator-item",{active:o===T.currentIndex}]),key:o,style:n(x.getIndicatorStyle),onMouseenter:w[4]||(w[4]=function(){return x.onStopSwiper&&x.onStopSwiper.apply(x,arguments)}),onClick:function(e){return x.onIndicator(o)}},null,46,m)})),128))])):l("v-if",!0),x.isEmpty?(e(),t("div",v," 暂无数据! ")):l("v-if",!0)],38)},c.__file="src/views/VueSwiper.vue";var w={install:function(e){e.component("SwiperVue",c)}};export{c as SwiperVue,w as default};