在使用vue-seamless-scroll这个组件的时候，我们有时候需要执行点击操作，但是发现有时候轮播的时候不能正确的拿到数据（点击没有任何反应），正常来说是可以获取到改行的数据。通过查阅资料发现因为vue-seamless-scroll中间包裹的dom复制渲染，没有带上dom的事件导致。于是，我们可以采用事件委托的方式进行处理。
绑定事件
我们可以在使用包裹着vue-seamless-scroll的组件的元素添加上click点击事件，例如下面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <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可以自己随便命名。
方法实现
我们在处理点击事件时，可以通过上面绑定的对象来获取数据
1
2
3
4
5
6
7
8
| handleClick(e) {
if (e.target.dataset.obj != null) {
const obj = JSON.parse(e.target.dataset.obj)
console.log(obj)
}
}
|
这里的dataset后面的obj就是我们上面定义的xxx，通过这个我们就可以实现获取数据了。