<template>
    <div class="demo demo1">
        <vue3SeamlessScroll :class-option="classOption" :list="list" @onChange="onChange">
            <p v-for="(item,index) in list" :key="index" :data-item="item+index">{{item}}</p>
        </vue3SeamlessScroll>
    </div>
    <div class="demo demo2">
        <vue3SeamlessScroll :class-option="classOption2" :list="list">
            <p v-for="(item,index) in list" :key="index">{{item}}</p>
        </vue3SeamlessScroll>
    </div>
</template>

<script>
    import {ref} from "vue";
    import vue3SeamlessScroll from '@zengxiaohui/vue3-seamless-scroll'
    import '@zengxiaohui/vue3-seamless-scroll/lib/vue3SeamlessScroll.css'
    export default {
        name: "demo",
        components: {vue3SeamlessScroll}
        setup() {
            const list = ref([])
            for (let i = 0; i < 20; i++) {
                list.value.push('人生有很多出其不意的惊喜，比如你会以为我举个栗子')
            }
            // 配置参数 在 seamscroll https://www.npmjs.com/package/seamscroll
            // 基础上增加 stop setTimeout配置 默认超出容器才会滚动
            const classOption = {
                singleHeight: 21+20, // 元素高度+下边距
                stop: false // 是否开启滚动
            }
            const classOption2 = {
                step: 0.5, // 速度
                hoverStop: true, // 鼠标停止
                direction: 1, // 0 下 1 上 2 左 3 右
                setTimeout: 200 // 延迟执行 毫秒
            }
            function onChange(e) {
                console.log(e)
            }
            return {
                classOption,
                classOption2,
                list,
                onChange
            }
        }
    }
</script>

<style scoped lang="scss">
    *{
        margin: 0;
        padding: 0;
    }
    .demo{
        width: 400px;
        height: 300px;
        border: 1px solid darkturquoise;
    p{
        margin-bottom: 20px;
    }
    }
    .demo2{
        margin-top: 50px;
    }
</style>