From ccf544dcc2499ddde06aa7bb0076d4885efc9055 Mon Sep 17 00:00:00 2001 From: houyl Date: Tue, 24 Oct 2017 16:47:12 +0800 Subject: [PATCH] Merge branch 'master' of https://github.com/iview/iview into 2.0 Update carousel component: add loop and radiusDot property # Conflicts: # package.json # src/components/date-picker/picker.vue # src/components/select/select.vue --- examples/routers/carousel.vue | 10 ++++------ src/components/carousel/carousel-item.vue | 9 +++++++++ src/components/carousel/carousel.vue | 104 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------- src/styles/components/carousel.less | 11 +++++++++++ 4 files changed, 115 insertions(+), 19 deletions(-) diff --git a/examples/routers/carousel.vue b/examples/routers/carousel.vue index 652a393..4d13a06 100644 --- a/examples/routers/carousel.vue +++ b/examples/routers/carousel.vue @@ -1,10 +1,8 @@ @@ -48,6 +50,10 @@ type: Number, default: 2000 }, + loop: { + type: Boolean, + default: false + }, easing: { type: String, default: 'ease' @@ -59,6 +65,10 @@ return oneOf(value, ['inside', 'outside', 'none']); } }, + radiusDot: { + type: Boolean, + default: false + }, trigger: { type: String, default: 'click', @@ -84,11 +94,16 @@ listWidth: 0, trackWidth: 0, trackOffset: 0, + trackCopyOffset: 0, + showCopyTrack: false, slides: [], slideInstances: [], timer: null, ready: false, - currentIndex: this.value + currentIndex: this.value, + trackIndex: this.value, + copyTrackIndex: this.value, + hideTrackPos: -1, // 默认左滑 }; }, computed: { @@ -97,13 +112,27 @@ `${prefixCls}` ]; }, + listStyle () { + return { + width: `${this.trackWidth * 2}px`, + }; + }, trackStyles () { return { width: `${this.trackWidth}px`, - transform: `translate3d(-${this.trackOffset}px, 0px, 0px)`, + transform: `translate3d(${-this.trackOffset}px, 0px, 0px)`, transition: `transform 500ms ${this.easing}` }; }, + copyTrackStyles () { + return { + width: `${this.trackWidth}px`, + transform: `translate3d(${-this.trackCopyOffset}px, 0px, 0px)`, + transition: `transform 500ms ${this.easing}`, + position: 'absolute', + top: 0 + }; + }, arrowClasses () { return [ `${prefixCls}-arrow`, @@ -142,6 +171,12 @@ }); } }, + // copy trackDom + initCopyTrackDom () { + this.$nextTick(() => { + this.$refs.copyTrack.innerHTML = this.$refs.originTrack.innerHTML; + }); + }, updateSlides (init) { let slides = []; let index = 1; @@ -158,7 +193,6 @@ }); this.slides = slides; - this.updatePos(); }, updatePos () { @@ -185,21 +219,57 @@ this.updatePos(); this.updateOffset(); }, + updateTrackPos (index) { + if (this.showCopyTrack) { + this.trackIndex = index; + } else { + this.copyTrackIndex = index; + } + }, + updateTrackIndex (index) { + if (this.showCopyTrack) { + this.copyTrackIndex = index; + } else { + this.trackIndex = index; + } + }, add (offset) { - let index = this.currentIndex; + // 获取单个轨道的图片数 + let slidesLen = this.slides.length; + // 如果是无缝滚动，需要初始化双轨道位置 + if (this.loop) { + if (offset > 0) { + // 初始化左滑轨道位置 + this.hideTrackPos = -1; + } else { + // 初始化右滑轨道位置 + this.hideTrackPos = slidesLen; + } + this.updateTrackPos(this.hideTrackPos); + } + // 获取当前展示图片的索引值 + let index = this.showCopyTrack ? this.copyTrackIndex : this.trackIndex; index += offset; - while (index < 0) index += this.slides.length; - index = index % this.slides.length; - this.currentIndex = index; - this.$emit('input', index); + while (index < 0) index += slidesLen; + if (((offset > 0 && index === slidesLen) || offset < 0 && index === slidesLen - 1) && this.loop) { + // 极限值（左滑：当前索引为总图片张数， 右滑：当前索引为总图片张数 - 1）切换轨道 + this.showCopyTrack = !this.showCopyTrack; + this.trackIndex += offset; + this.copyTrackIndex += offset; + } else { + if (!this.loop) index = index % this.slides.length; + this.updateTrackIndex(index); + } + this.$emit('input', index === this.slides.length ? 0 : index); }, arrowEvent (offset) { this.setAutoplay(); this.add(offset); }, dotsEvent (event, n) { - if (event === this.trigger && this.currentIndex !== n) { - this.currentIndex = n; + let curIndex = this.showCopyTrack ? this.copyTrackIndex : this.trackIndex; + if (event === this.trigger && curIndex !== n) { + this.updateTrackIndex(n); this.$emit('input', n); // Reset autoplay timer when trigger be activated this.setAutoplay(); @@ -215,7 +285,10 @@ }, updateOffset () { this.$nextTick(() => { - this.trackOffset = this.currentIndex * this.listWidth; + /* hack: revise copyTrack offset (1px) */ + let ofs = this.copyTrackIndex > 0 ? -1 : 1; + this.trackOffset = this.trackIndex * this.listWidth; + this.trackCopyOffset = this.copyTrackIndex * this.listWidth + ofs; }); } }, @@ -228,6 +301,11 @@ }, currentIndex (val, oldVal) { this.$emit('on-change', oldVal, val); + }, + trackIndex () { + this.updateOffset(); + }, + copyTrackIndex () { this.updateOffset(); }, height () { diff --git a/src/styles/components/carousel.less b/src/styles/components/carousel.less index d253c43..e8c69ac 100644 --- a/src/styles/components/carousel.less +++ b/src/styles/components/carousel.less @@ -31,6 +31,9 @@ overflow: hidden; z-index: 1; + &.higher { + z-index: 2; + } } &-item { @@ -159,6 +162,11 @@ color: transparent; transition: all .5s; + &.radius { + width: 6px; + height: 6px; + border-radius: 50%; + } } &:hover > button { @@ -168,6 +176,9 @@ &.@{carousel-prefix-cls}-active > button { opacity: 1; width: 24px; + &.radius{ + width: 6px; + } } } } -- libgit2 0.21.4