Merge pull request #2181 from lisafra/update-carousel

Update carousel component: add loop and radiusDot property

Merge pull request #2181 from lisafra/update-carousel
Update carousel component: add loop and radiusDot property
Aresn · GitHub
2 parents 8711920b 610fd3a5
Showing 4 changed files with 110 additions and 19 deletions Show diff stats
examples/routers/carousel.vue
src/components/carousel/carousel-item.vue
src/components/carousel/carousel.vue
src/styles/components/carousel.less
 <template>
     <div>
-        <Carousel v-model="v1" dots="inside" trigger="hover">
+        <Carousel v-model="v1" dots="inside" trigger="hover" autoplay loop radius-dot>
             <Carousel-item>
-                <Card>
-                    <div class="demo-carousel">1</div>
-                </Card>
+                <div class="demo-carousel">1</div>
             </Carousel-item>
             <Carousel-item>
                 <div class="demo-carousel">2</div>
@@ -24,8 +22,8 @@
     export default {
         data () {
             return {
-                v1: 1
-            }
+                v1: 0
+            };
         },
         methods: {
             push () {
@@ -27,6 +27,15 @@
         mounted () {
             this.$parent.slotChange();
         },
+        watch: {
+            width (val) {
+                if (val && this.$parent.loop) {
+                    this.$nextTick(() => {
+                        this.$parent.initCopyTrackDom();
+                    });
+                }
+            }
+        },
         beforeDestroy () {
             this.$parent.slotChange();
         }
@@ -4,9 +4,11 @@
             <Icon type="chevron-left"></Icon>
         </button>
         <div :class="[prefixCls + '-list']">
-            <div :class="[prefixCls + '-track']" :style="trackStyles">
+            <div :class="[prefixCls + '-track', showCopyTrack ? '' : 'higher']" :style="trackStyles" ref="originTrack">
                 <slot></slot>
             </div>
+            <div :class="[prefixCls + '-track', showCopyTrack ? 'higher' : '']" :style="copyTrackStyles" ref="copyTrack" v-if="loop">
+            </div>
         </div>
         <button :class="arrowClasses" class="right" @click="arrowEvent(1)">
             <Icon type="chevron-right"></Icon>
@@ -16,7 +18,7 @@
                 <li :class="[n - 1 === currentIndex ? prefixCls + '-active' : '']"
                     @click="dotsEvent('click', n - 1)"
                     @mouseover="dotsEvent('hover', n - 1)">
-                    <button></button>
+                    <button :class="[radiusDot ? 'radius' : '']"></button>
                 </li>
             </template>
         </ul>
@@ -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: {
@@ -100,10 +115,19 @@
             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 +166,12 @@
                     });
                 }
             },
+            // copy trackDom
+            initCopyTrackDom () {
+                this.$nextTick(() => {
+                    this.$refs.copyTrack.innerHTML = this.$refs.originTrack.innerHTML;
+                });
+            },
             updateSlides (init) {
                 let slides = [];
                 let index = 1;
@@ -158,7 +188,6 @@
                 });
  
                 this.slides = slides;
-
                 this.updatePos();
             },
             updatePos () {
@@ -185,21 +214,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 +280,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 +296,11 @@
             },
             currentIndex (val, oldVal) {
                 this.$emit('on-change', oldVal, val);
+            },
+            trackIndex () {
+                this.updateOffset();
+            },
+            copyTrackIndex () {
                 this.updateOffset();
             },
             height () {
@@ -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;
+                }
             }
         }
     }