src/components/carousel/carousel.vue

<template>
    <div :class="classes">
        <!-- 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>
        <!-- button -->
    </div>
</template>
<script>
    import Icon from '../icon/icon.vue';
    import { oneOf, getStyle, deepCopy, getScrollBarSize } from '../../utils/assist';
    const prefixCls = 'ivu-carousel';
    export default {
        name: 'Carousel',
        props: {
            arrows: {
                type: Boolean,
                default: false
            },
            autoplay: {
                type: Boolean,
                default: true
            },
            autoplaySpeed: {
                type: Number,
                default: 2000
            },
            easing: {
                type: String,
                default: 'ease'
            },
            dots: {
                type: Boolean,
                default: true
            },
            fade: {
                type: Boolean,
                default: false
            },
            vertical: {
                type: Boolean,
                default: false
            },
            currentIndex: {
                type: Number,
                default: 0
            }
        },
        data () {
            return {
                prefixCls: prefixCls,
                listWidth: 0,
                trackWidth: 0,
                trackLeft: 0,
                slides: [],
                slideInstances: [],
                timer: null
            }
        },
        // events: before-change(from, to), after-change(current, from)
        computed: {
            classes () {
                return [
                    `${prefixCls}`,
                    {
                        [`${prefixCls}-vertical`]: this.vertical
                    }
                ];
            },
            trackStyles () {
                return {
                    width: `${this.trackWidth}px`,
                    transform: `translate3d(-${this.trackLeft}px, 0px, 0px)`,
                    transition: `transform 500ms ${this.easing}`
                };
            }
        },
        methods: {
            // find option component
            findChild (cb) {
                const find = function (child) {
                    const name = child.$options.componentName;
                    if (name) {
                        cb(child);
                    } else if (child.$children.length) {
                        child.$children.forEach((innerChild) => {
                            find(innerChild, cb);
                        });
                    }
                };
                if (this.slideInstances.length) {
                    this.slideInstances.forEach((child) => {
                        find(child);
                    });
                } else {
                    this.$children.forEach((child) => {
                        find(child);
                    });
                }
            },
            updateSlides (init, slot = false) {
                let slides = [];
                let index = 1;
                this.findChild((child) => {
                    slides.push({
                        $el: child.$el
                    });
                    child.index = index++;
                    if (init) {
                        this.slideInstances.push(child);
                    }
                });
                this.slides = slides;
                // this.updateSlideWidth();
            },
            updatePos () {
                this.findChild((child) => {
                    child.width = this.listWidth;
                });
                this.trackWidth = (this.slides.length || 0) * this.listWidth;
            },
            // use when slot changed
            slotChange () {
                this.slides = [];
                this.slideInstances = [];
            },
            handleResize () {
                this.$nextTick(() => {
                    this.listWidth = parseInt(getStyle(this.$el, 'width'));
                    this.updatePos();
                });
            },
            slide () {
                this.trackLeft = this.currentIndex * this.listWidth;
            },
            setAutoplay () {
                window.clearInterval(this.timer);
                if (this.autoplay) {
                    this.timer = window.setInterval(() => {
                        let index = this.currentIndex;
                        index ++;
                        if (index === this.slides.length) index = 0;
                        this.currentIndex = index;
                    }, this.autoplaySpeed);
                }
            }
        },
        compiled () {
            this.updateSlides(true);
            // watch slot changed
            if (MutationObserver) {
                this.observer = new MutationObserver(() => {
                    this.slotChange();
                    this.updateSlides(true, true);
                });
                this.observer.observe(this.$els.slides, {
                    childList: true,
                    characterData: true,
                    subtree: true
                });
            }
        },
        watch: {
            autoplay () {
                this.setAutoplay();
            },
            autoplaySpeed () {
                this.setAutoplay();
            },
            currentIndex () {
                this.$nextTick(() => {
                    this.slide();
                });
            }
        },
        ready () {
            this.handleResize();
            this.setAutoplay();
            window.addEventListener('resize', this.handleResize, false);
        },
        beforeDestroy () {
            window.removeEventListener('resize', this.handleResize, false);
        }
    };
</script>