在使用vue-seamless-scroll时候,想要点击某一列/行触发一个事件,发现,前几个可以,后面几个就不行了,不能点击的原因是因为html元素是复制出来的(滚动组件是将后面的复制出来一份,进行填铺页面,方便滚动)
解决方案:往滚动组件的父节点上添加绑定事件(js冒泡机制),通过e.target定位到具体点击位置,然后判断点击位置是否是你滚动组件的一列/行
<div class="lm-container-right-block" @click="itemClick"> // 点击事件绑定到父节点上
<vue-seamless-scroll :data="list" class="seamless-warp">
<ul class="seamless-warp-items"> // 设置样式,方便定位
<li
v-for="(item, index) in list"
:key="item.id"
class="seamless-warp-item"
:data-index="index" // 绑定index(或者直接放数据,JSON.stringify(item))
>
<take-capture />
</li>
</ul>
</vue-seamless-scroll>
</div>
itemClick(e) {
const item = e.target.closest(".seamless-warp-item"); // 定位元素
if (item) { // 是否是滚动组件的某一行/列
const { index } = item.dataset;
this.info = this.list[index]; // 你想获取的数据
// 后续操作
}
}