added horizontal dots

Rijn
1 parent 373dfb3c
Showing 3 changed files with 181 additions and 39 deletions Show diff stats
src/components/carousel/carousel.vue
src/styles/components/carousel.less
test/routers/carousel.vue
 <template>
     <div :class="classes">
-        <div :class="[prefixCls + '-arrow', 'left']" @click="add(-1)">
-            <div class='placeholder'></div>
-            <Icon type="arrow-left-b"></Icon>
-        </div>
+        <button :class="arrowClasses" class="left" @click="add(-1)">
+            <Icon type="chevron-left"></Icon>
+        </button>
         <div :class="[prefixCls + '-list']">
             <div :class="[prefixCls + '-track']" :style="trackStyles" v-el:slides>
                 <!-- opacity: 1; width: 4480px; transform: translate3d(-1120px, 0px, 0px); -->
                 <slot></slot>
             </div>
         </div>
-        <div :class="[prefixCls + '-arrow', 'right']" @click="add(1)">
-            <div class='placeholder'></div>
-            <Icon type="arrow-right-b"></Icon>
-        </div>
-        <!-- dots -->
+        <button :class="arrowClasses" class="right" @click="add(1)">
+            <Icon type="chevron-right"></Icon>
+        </button>
+        <ul :class="dotsClasses">
+            <template v-for="n in slides.length">
+                <li :class="{ [`${prefixCls}-active`]: n === currentIndex }"
+                    @click="dotsEvent('click', n)"
+                    @mouseover="dotsEvent('hover', n)">
+                    <button></button>
+                </li>
+            </template>
+        </ul>
     </div>
 </template>
 <script>
@@ -26,9 +32,9 @@
     export default {
         name: 'Carousel',
         props: {
-            arrows: {
-                type: Boolean,
-                default: false
+            arrow: {
+                type: String,
+                default: 'hover'
             },
             autoplay: {
                 type: Boolean,
@@ -43,8 +49,12 @@
                 default: 'ease'
             },
             dots: {
-                type: Boolean,
-                default: true
+                type: String,
+                default: 'inside'
+            },
+            trigger: {
+                type: String,
+                default: 'click'
             },
             vertical: {
                 type: Boolean,
@@ -66,7 +76,6 @@
                 timer: null
             }
         },
-        // events: before-change(from, to), after-change(current, from)
         computed: {
             classes () {
                 return [
@@ -82,6 +91,23 @@
                     transform: `translate3d(-${this.trackLeft}px, 0px, 0px)`,
                     transition: `transform 500ms ${this.easing}`
                 };
+            },
+            arrowClasses () {
+                return [
+                    `${prefixCls}-arrow`,
+                    `${prefixCls}-arrow-${this.arrow}`
+                ]
+            },
+            dotsClasses () {
+                return [
+                    `${prefixCls}-dots`,
+                    `${prefixCls}-arrow-${this.dots}`
+                ]
+            },
+            activeDot (n) {
+                return {
+                    [`${prefixCls}-vertical`]: this.currentIndex === n
+                }
             }
         },
         methods: {
@@ -156,10 +182,14 @@
                 index += offset;
                 while (index < 0) index += this.slides.length;
                 index = index % this.slides.length;
+                this.$emit('on-change', this.currentIndex, index);
                 this.currentIndex = index;
             },
-            slide () {
-                this.trackLeft = this.currentIndex * this.listWidth;
+            dotsEvent (event, n) {
+                if (event === this.trigger) {
+                    this.$emit('on-change', this.currentIndex, n);
+                    this.currentIndex = n;
+                }
             },
             setAutoplay () {
                 window.clearInterval(this.timer);
@@ -182,7 +212,7 @@
             },
             currentIndex () {
                 this.$nextTick(() => {
-                    this.slide();
+                    this.trackLeft = this.currentIndex * this.listWidth;
                 });
             }
         },
@@ -41,40 +41,123 @@
     }
     &-arrow {
+
+        border: none;
+        outline: none;
+
+        padding: 0;
+        margin: 0;
+
+        width: 36px;
+        height: 36px;
+        border-radius: 50%;
+
+        cursor: pointer;
+
+        display: none;
+
         position: absolute;
-        top: 0;
-        bottom: 0;
-        height: 100%;
+        top: 50%;
+        z-index: 10;
+        transform: translateY(-50%);
+
+        transition: .3s;
+        background-color: rgba(31, 45, 61, .11);
+        color: #fff;
+
+        &:hover {
+            background-color: rgba(31, 45, 61, 0.5);
+        }
         text-align: center;
+        font-size: 1em;
+
+        font-family: inherit;
+        line-height: inherit;
         & > * {
-            display: inline-block;
-            vertical-align: middle;
+            vertical-align: baseline;
         }
-        .placeholder{
-            overflow: hidden;
-            width: 0;
-            min-height: inherit;
-            height: inherit;
+        &.left {
+            left: 16px;
         }
-        z-index: 3;
+        &.right {
+            right: 16px;
+        }
-        &.left {
-            left: 0;
+        &-always {
+            display: inherit;
         }
-        &.right {
-            right: 0;
+
+        &-hover {
+            display: inherit;
+
+            opacity: 0;
         }
+    }
-        width: 10%;
+    &:hover &-arrow-hover {
+        opacity: 1;
+    }
-        cursor: pointer;
+    &-dots {
+        @padding: 7px;
-        &:hover {
-            background: fade(#000, 30%);
+        position: absolute;
+        bottom: 10px - @padding;
+
+        list-style: none;
+        display: block;
+
+        text-align: center;
+
+        padding: 0;
+        width: 100%;
+        height: 3px + @padding * 2;
+
+        li {
+            position: relative;
+            display: inline-block;
+
+            vertical-align: top;
+            text-align: center;
+
+            margin: 0 2px;
+            padding: @padding 0;
+
+            cursor: pointer;
+
+            button {
+                border: 0;
+                cursor: pointer;
+
+                background: #8391a5;
+                opacity: 0.3;
+
+                display: block;
+                width: 16px;
+                height: 3px;
+
+                border-radius: 1px;
+                outline: none;
+
+                font-size: 0;
+                color: transparent;
+
+                -webkit-transition: all .5s;
+                transition: all .5s;
+            }
+
+            &:hover > button {
+                opacity: 0.7;
+            }
+
+            &.@{carousel-prefix-cls}-active > button {
+                opacity: 1;
+                width: 24px;
+            }
         }
     }
 }
@@ -21,13 +21,39 @@
         </i-col>
         <i-col span="4">
             <i-button @click="push">Push</i-button>
-            <i-button @click="remove = true">Remove</i-button>
+            <i-button @click="remove = true">Remove Front</i-button>
+        </i-col>
+        <i-col span="4">
+            <p>Dots</p>
+            <Button-group>
+                <i-button @click="dots = 'inside'">Inside</i-button>
+                <i-button @click="dots = 'outside'">Outside</i-button>
+                <i-button @click="dots = 'none'">None</i-button>
+            </Button-group>
+        </i-col>
+        <i-col span="4">
+            <p>Trigger</p>
+            <Button-group>
+                <i-button @click="trigger = 'click'">Click</i-button>
+                <i-button @click="trigger = 'hover'">Hover</i-button>
+            </Button-group>
+        </i-col>
+        <i-col span="4">
+            Arrow
+            <Button-group>
+                <i-button @click="arrow = 'hover'">Hover</i-button>
+                <i-button @click="arrow = 'always'">Always</i-button>
+                <i-button @click="arrow = 'never'">Never</i-button>
+            </Button-group>
         </i-col>
     </Row>
     <Carousel style="width: 50%; border: solid 1px #000"
         :current-index.sync="currentIndex"
         :autoplay="autoplay"
         :autoplay-speed="autoplaySpeed"
+        :dots="dots"
+        :trigger="trigger"
+        :arrow="arrow"
         easing="linear">
         <Carousel-item v-if="!remove">
             <Alert type="warning" show-icon>
@@ -54,7 +80,10 @@
                 autoplay: true,
                 autoplaySpeed: 2000,
                 remove: false,
-                pushItem: []
+                pushItem: [],
+                arrow: 'hover',
+                trigger: 'click',
+                dots: 'inside'
             }
         },
         methods: {