swiper-vue/dist/hut-cjs.js

轮播 swiper slider component for Vue.js

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("vue"),t={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)}},i={class:"vue-swiper--container",ref:"swiperContainerRef"},n=e.createElementVNode("div",{class:"default-arrow"}," < ",-1),r=e.createElementVNode("div",{class:"default-arrow"}," > ",-1),o={key:0,class:"vue-swiper--indicator"},s=["onClick"],a={key:1,class:"vue-swiper--empty"};t.render=function(t,l,c,h,u,d){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["vue-swiper","arrow-"+c.arrow,c.direction]),ref:"swiperRef",style:e.normalizeStyle(d.containerStyle),onMouseenter:l[5]||(l[5]=function(){return d.onStopSwiper&&d.onStopSwiper.apply(d,arguments)}),onMouseleave:l[6]||(l[6]=function(){return d.onMouseleave&&d.onMouseleave.apply(d,arguments)}),onMousedown:l[7]||(l[7]=function(){return d.onMousedown&&d.onMousedown.apply(d,arguments)}),onMousemove:l[8]||(l[8]=function(){return d.onMousemove&&d.onMousemove.apply(d,arguments)})},[e.createElementVNode("div",i,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(d.cloneData,(function(i,n){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["vue-swiper--item",{active:n===u.currentIndex}]),key:n},[e.renderSlot(t.$slots,"default",{item:i,index:n,activeIndex:u.currentIndex,isActive:n===u.currentIndex})],2)})),128))],512),e.createElementVNode("div",{class:"vue-swiper--arrow-pre",style:e.normalizeStyle(d.cursorArrowStyle),onMouseenter:l[0]||(l[0]=function(){return d.onStopSwiper&&d.onStopSwiper.apply(d,arguments)}),onClick:l[1]||(l[1]=e.withModifiers((function(){return d.handlePreArrow&&d.handlePreArrow.apply(d,arguments)}),["stop"]))},[e.renderSlot(t.$slots,"pre-icon",{},(function(){return[n]}))],36),e.createElementVNode("div",{class:"vue-swiper--arrow-next",style:e.normalizeStyle(d.cursorArrowStyle),onMouseenter:l[2]||(l[2]=function(){return d.onStopSwiper&&d.onStopSwiper.apply(d,arguments)}),onClick:l[3]||(l[3]=e.withModifiers((function(){return d.handleNextArrow&&d.handleNextArrow.apply(d,arguments)}),["stop"]))},[e.renderSlot(t.$slots,"next-icon",{},(function(){return[r]}))],36),d.showIndicator?(e.openBlock(),e.createElementBlock("div",o,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(c.items,(function(t,i){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["vue-swiper--indicator-item",{active:i===u.currentIndex}]),key:i,style:e.normalizeStyle(d.getIndicatorStyle),onMouseenter:l[4]||(l[4]=function(){return d.onStopSwiper&&d.onStopSwiper.apply(d,arguments)}),onClick:function(e){return d.onIndicator(i)}},null,46,s)})),128))])):e.createCommentVNode("v-if",!0),d.isEmpty?(e.openBlock(),e.createElementBlock("div",a," 暂无数据! ")):e.createCommentVNode("v-if",!0)],38)},t.__file="src/views/VueSwiper.vue";var l={install:function(e){e.component("SwiperVue",t)}};exports.SwiperVue=t,exports.default=l;