vue简单的多项并排轮播组件

简单的多项并排轮播组件，有需要的可在这个基础上做封装

<template>
    <div class="swiperMulti" @mouseenter="mouseenter" @mouseleave="mouseleave">
        <button @click.stop="toRight" class="el-toRight">+</button>
        <button @click.stop="toLeft" class="el-toLeft">-</button>
        <ul>
            <li
                v-for="(item, index) in data"
                :key="item.id"
                :style="`left:${(index - 1) * itemPositionInterval}px`"
                :ref="'item' + index"
                :data-position-left="(index - 1) * itemPositionInterval"
            >
                {{ item.id }}
            </li>
        </ul>
    </div>
</template>

 
<script>
let timer;

export default {
    data() {
        return {
            active: 1,
            itemPositionInterval: 240, // 定位间隔
            data: [
                {
                    id: 1,
                },
                {
                    id: 2,
                },
                {
                    id: 3,
                },
                {
                    id: 4,
                },
                {
                    id: 5,
                },
                {
                    id: 6,
                },
                {
                    id: 7,
                },
                {
                    id: 8,
                },
                {
                    id: 9,
                },
                {
                    id: 10,
                },
            ],
        };
    },

    created() {},
    mounted() {
        this.setInterval()
    },
    destroyed() {
        clearInterval(timer);
    },
    methods: {
        toRight() {
            let firstItemPositionLift = this.$refs.item0[0].getAttribute(
                "data-position-left"
            );
            if (Number(firstItemPositionLift) <= -this.itemPositionInterval) {
                this.data.push(this.data.shift());
            }
        },
        toLeft() {
            let firstItemPositionLift = this.$refs.item0[0].getAttribute(
                "data-position-left"
            );
            if (Number(firstItemPositionLift) >= -this.itemPositionInterval) {
                this.data.unshift(this.data.pop());
            }
        },
        setInterval() {
            timer = setInterval(() => {
                this.toRight();
            }, 2000);
        },
        mouseenter(e) {
            console.log("mouseenter");
            clearInterval(timer);
        },
        mouseleave() {
            console.log("mouseleave");
            this.setInterval()
        },
    },
};
</script>
 
<style lang="scss" scope>
.swiperMulti {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    position: relative;
    > .el-toRight {
        position: absolute;
        z-index: 1;
        left: 0;
        top: 50%;
    }
    > .el-toLeft {
        position: absolute;
        z-index: 1;
        right: 0;
        top: 50%;
    }
    ul {
        width: 100%;
        height: 100%;
        li {
            border: 1px solid rgb(60, 206, 16);
            width: 220px;
            height: 100%;
            position: absolute;
            transition: all 0.5s ease;
            font-size: 120px;
        }
    }
}
</style>