解决使用vue-seamless-scroll时点击无法正确获取改行数据

在使用vue-seamless-scroll这个组件的时候，我们有时候需要执行点击操作，但是发现有时候轮播的时候不能正确的拿到数据（点击没有任何反应），正常来说是可以获取到改行的数据。通过查阅资料发现因为vue-seamless-scroll中间包裹的dom复制渲染，没有带上dom的事件导致。于是，我们可以采用事件委托的方式进行处理。

绑定事件

我们可以在使用包裹着vue-seamless-scroll的组件的元素添加上click点击事件，例如下面

<div class="list-contain" @click="handleClick($event)">
    <vue-seamless-scroll :data="componentData" class="seamless-warp" :class-option="scrollOption">
        <div class="item" v-for="(item,index) in componentData" :key="index">
            <div class="table-row">
                <div class="row-line">
                    <div class="tr-col1 tr" :data-title="item.planeNumber">{{ item.planeNumber }}</div>
                    <div class="tr-col2 tr">{{ item.name }}</div>
                    <div class="tr-col3 tr">{{ item.partTotal }}</div>
                    <div class="tr-col4 tr">{{ item.troubleTotal }}</div>
                    <div class="tr-col5 tr">
                        <button class="part-button" :data-obj="JSON.stringify(item)">
                            切换零件
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </vue-seamless-scroll>
</div>

在最外面的div上添加@click="handleClick($event)"

绑定事件对象

既然我们要获取到对象，我们就需要处理对象，将对象所有的数据获取，这里我们通过一个按钮来绑定获取的对象。

1
2
3

<button class="part-button" :data-obj="JSON.stringify(item)">
                            切换零件
</button>

这里的data-xxx，其中的xxx可以自己随便命名。

方法实现

我们在处理点击事件时，可以通过上面绑定的对象来获取数据

handleClick(e) {
		// 可以用事件委托的方式处理解决vue-seamless-scroll插件点击事件无效
		// 使仅点击按钮触发点击事件,dataset后面的.xxx与上面的 :data-xxx需要一致
		if (e.target.dataset.obj != null) {
		const obj = JSON.parse(e.target.dataset.obj)
        console.log(obj)
	}
}