vue-seamless-scroll 控制左右滑动，点击无法响应问题

vue-seamless-scroll 相对swiper.js来说有比较轻量级，但使用过程中也遇上了几个问题，经过查看源代码后才完成了修改

1.使用

npm install vue-seamless-scroll 

我这里使用的版本是 1.1.23
组件中引入

import vueSeamlessScroll from "vue-seamless-scroll";

下面代码主要解决几个问题

1.在组件外部使用左右按钮进行滑动

为什么在外部使用左右滑动按钮 因为我发现如果配置了自动播放，使用组件自带的左右按钮就无法显示，业务需求是需要自动播放还需要左右按钮进行滑动

mouseenter和mouseleave鼠标移入移出时停止自动播放

点击左右按钮平移元素源代码中时移动translate 属性，然后transition又是根据autoplay来判断是否开启,所以会遇上点击没有滑动动画的问题，这个问题我加了个全局css来解决

以下代码会有个问题 就是到第一个的时候无法再往前移，目前还未解决，应对需求已经够了。

2.点击无法响应的问题

   源代码中是复制了一份数据然后v-html到复制元素中，所以绑定的点击事件无法响应，所以使用绑定到父元素中，监听冒泡来响应点击事件

<template>
 <div>
    <div class="Box" @click="goDetail">
                <span class="btnl btn" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave"
                    @click.stop="handleLeft"></span>
                <span class="btnr btn" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave"
                    @click.stop="handleRight"></span>
                <vue-seamless-scroll ref="seamlessScroll" :data="listData" :class-option="classOption" class="conbox"  :class="{ 'hovercon': isHover }"
                    >
                    <ul>
                        <li :data-id="item.id" class="cur" v-for="(item, index) in listData" :key="index">
                            <img :data-id="item.id" :src="item.url" />
                        </li>
                    </ul>
                </vue-seamless-scroll>
            </div>
 </div>
</template>
<script >    
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
    components: {
        vueSeamlessScroll,
    },
    data() {
        return{
            isHover:false,
            listData:[{
              id:1
              url:'1.png'
            }],
            classOption: {
                autoPlay: true,
                step: 3,
                direction: 2,
                singleWidth: 120,
                switchSingleStep: 120,
                switchDelay: 200,
                navigation: false
            }  
        }
    },
    methods:{
        handleMouseenter() {
             this.$refs.seamlessScroll.enter()
             this.isHover = true
        },
        handleMouseleave() {
            this.$refs.seamlessScroll.leave()
            this.isHover = false
        },
        handleLeft() {
            this.$refs.seamlessScroll.leftSwitchClick()
        },
        handleRight() {
            this.$refs.seamlessScroll.rightSwitchClick()
        },
        goDetail(e) {
            const id = e.target.dataset.id;
            if (id) {
                let { href } = this.$router.resolve({ path: '/detail/' + id })
                window.open(href, '_blank')
            }
        },
    }
}
</script>
<style>
.conbox.hovercon div:first-child {
    color: #fff;
    transition: all linear .2s !important;
}
</style>

实在觉得麻烦还是使用swiper.js吧。